Angular Scheduler Hours Visibility

[Jasmine]

Hello Team,

We are using your scheduler component of Angular technology. We have a query on how to display different working hours for each day of the week (NOTE: we are using Horizontal grouping timeline view with resource grouping) but the only challenge we are facing is that scheduler greys out the non-working hours but we would like to eliminate/not show non-working hours at all(NOTE: we would still want to be able to give different working hours for each day of the week). Please respond soonest possible as we have a project deadline.

[Vijay Ravi]

Hi Jasmine,

Sample: https://stackblitz.com/edit/ej2-angular-schedule-different-work-hours-for-each-day?file=src%2Fapp.component.ts

UG: https://ej2.syncfusion.com/angular/documentation/schedule/how-to/set-different-work-hours

You can set the different work hours for each day of the Schedule with the help of the getCurrentViewDates, resetWorkHours, setWorkHours methods and actionComplete, dataBound events of the Schedule as highlighted in the below code snippet. Also, you can set the start and end hours of the days with the help of the startHour and endHour properties. Let us know if you need any further assistance.

[app.component.html]

<ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px'

  [selectedDate]="selectedDate" [group]="group" [workDays]="workDays" [eventSettings]="eventSettings"

  [startHour]="startHour" [endHour]="endHour" [showWeekend]="showWeekend" (dataBound)="onDataBound($event)"

  (actionComplete)="onActionComplete($event)">

  <e-resources>

    <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple'

      name='Categories' textField='text' idField='id' groupIDField='groupId' colorField='color'>

    </e-resource>

  </e-resources>

</ejs-schedule>

[app.component.ts]

export class AppComponent {

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

  public selectedDate: Date = new Date(2023, 0, 4);

  public group: GroupModel = {

    resources: ['Categories']

  };

  public categoryDataSource: Record<string, any>[] = [

    { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },

    { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },

    { text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' },

    { text: 'Smith', id: 4, groupId: 2, color: '#5978ee' },

    { text: 'Michael', id: 5, groupId: 3, color: '#df5286' },

    { text: 'Root', id: 6, groupId: 3, color: '#00bdae' }

  ];

  public allowMultiple = true;

  public eventSettings: EventSettingsModel = {

    dataSource: extend([], resourceData.concat(timelineResourceData), null, true) as Record<string, any>[]

  };

  public startHour = '08:00';

  public endHour = '20:00';

  public showWeekend = false;

 

  public workHours: Record<string, any>[] = [

    { startHour1: "00:00", endHour1: "00:00", startHour2: "00:00", endHour2: "00:00" }, // for Sunday 

    { startHour1: "08:00", endHour1: "10:00", startHour2: "17:00", endHour2: "20:00" }, // for Monday 

    { startHour1: "09:00", endHour1: "11:00", startHour2: "16:00", endHour2: "19:00" }, // for Tuesday 

    { startHour1: "10:00", endHour1: "12:00", startHour2: "15:00", endHour2: "20:00" }, // for Wednesday 

    { startHour1: "11:00", endHour1: "13:00", startHour2: "14:00", endHour2: "18:00" }, // for Thursday 

    { startHour1: "08:00", endHour1: "12:00", startHour2: "13:00", endHour2: "20:00" }, // for Friday 

    { startHour1: "00:00", endHour1: "00:00", startHour2: "00:00", endHour2: "00:00" } // for Saturday 

  ];

  public isLayoutChanged = false;

 

  public onDataBound() {

    if (this.isLayoutChanged) {

      // Getting current view dates

      let renderedDates = this.scheduleObj.getCurrentViewDates();

      // Resetting the default Schedule work hours

      this.scheduleObj.resetWorkHours();

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

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

        if ([0, 6].indexOf(dayIndex) < 0) {

          // Setting up work hours for each resource

          for (let j = 0; j < this.categoryDataSource.length; j++) {

            this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours[dayIndex].startHour1, this.workHours[dayIndex].endHour1, j);

            this.scheduleObj.setWorkHours([renderedDates[i]], this.workHours[dayIndex].startHour2, this.workHours[dayIndex].endHour2, j);

          }

        }

      }

      this.isLayoutChanged = false;

    }

  }

 

  public onActionComplete(args: ActionEventArgs) {

    if (args.requestType === "toolBarItemRendered" || args.requestType === "dateNavigate" || args.requestType === "viewNavigate") {

      this.isLayoutChanged = true;

    }

  }

}

Regards,

Vijay Ravi