Blocking events

[Carla Candiotti]

Hello,

I would like to set blocking events to the calendar, e.g. each lunch time ; and I saw that a popup prevents us from placing events at these slots with the editor.

But if we would like to allow users placing events anymay and just warn them? Can blocking events be forced?

Otherwise, can we set several schedule hours for schedule? :

scheduleHours: [
  { highlight: true, start: '9:00', end: '12:00'},
  { highlight: true, start: '13:00', end: '18:00'}
]

Thanks for your response

[Ravikumar Venkatesan]

Hi Carla,

Q1: If we would like to allow users placing events anymay and just warn them? Can blocking events be forced?

According to the current schedule architecture, it's not possible to allow adding an appointment in the blocked time range.

UG: https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#block-dates-and-times

Demo: https://ej2.syncfusion.com/angular/demos/#/material/schedule/block-events

Q2: Can we set several schedule hours for schedule?

You can add several work hours to the schedule with the help of the setWorkHours and resetWorkHours methods, actionComplete, and dataBound events of the schedule, as shown in the below code snippet.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-multiple-work-hours-sample?file=app.component.ts

[app.component.html]

<ejs-schedule #scheduleObj width='100%' height='800px' cssClass='work-hours-schedule' (actionComplete)='onActionComplete($event)' (dataBound)='onDataBound($event)' [eventSettings]='eventSettings'>

</ejs-schedule>

[app.component.ts]

export class AppComponent {

  @ViewChild('scheduleObj') public scheduleObj: ScheduleComponent;

  public islayoutChanged: boolean = true;

 

  public onActionComplete(args): void {

    if (args.requestType === 'dateNavigate' || args.requestType === 'viewNavigate') {

      this.islayoutChanged = true;

    }

  }

 

  public onDataBound(args): void {

    if (this.islayoutChanged && ['Day', 'Week', 'WorkWeek'].indexOf(this.scheduleObj.currentView) > -1) {

      // Getting the current view rendered dates.

      const renderedDates: Date[] = this.scheduleObj.getCurrentViewDates() as Date[];

      // Resetting default work hours.

      this.scheduleObj.resetWorkHours();

      for (var i = 0; i < renderedDates.length; i++) {

        var dayIndex = renderedDates[i].getDay();

        if (dayIndex !== 0 && dayIndex !== 6) {

          // Setting up multiple work hours for each day of the week.

          this.scheduleObj.setWorkHours([renderedDates[i]], '09:00', '12:00');

          this.scheduleObj.setWorkHours([renderedDates[i]], '13:00', '18:00');

        }

      }

    }

    this.islayoutChanged = false;

  }

}

Regards,

Ravikumar Venkatesan