Set Different Working Hours on Different Days in Angular Scheduler

By default, the Angular Scheduler highlights work hours using the workHours property, which applies the same range to every day. To define different work hours for specific days, use the setWorkHours method.

Pass a single Date object or an array of dates as the first argument, then provide the start and end times as the second and third arguments. The example below shows how to set work hours from 11:00 AM to 8:00 PM for February 15 and 17.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule'



import { Component, ViewChild } from '@angular/core';
import { EventSettingsModel, ScheduleComponent, WorkHoursModel } from '@syncfusion/ej2-angular-schedule';
import { scheduleData } from './datasource';

@Component({
imports: [
        
        ScheduleModule,
        ButtonModule
    ],

providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService],
standalone: true,
  selector: 'app-root',
  // specifies the template string for the Schedule component
  template: `<button ejs-button cssClass='e-info' (click)='workHour()'> Change the work hours </button>
  <ejs-schedule #scheduleObj width='100%' height='550px' [workHours]="workHours" [selectedDate]="selectedDate" [eventSettings]="eventSettings" > <e-views> <e-view option="Week"></e-view> <e-view option="WorkWeek"></e-view> <e-view option="Month"></e-view> <e-view option="Day"></e-view> </e-views> </ejs-schedule>`
})
export class AppComponent {
    @ViewChild('scheduleObj')
    public scheduleObj?: ScheduleComponent;
    public workHours: WorkHoursModel = { start: '9:00', end: '11:00' };
    public selectedDate: Date = new Date(2018, 1, 15);
    public eventSettings: EventSettingsModel = { dataSource: scheduleData };
    workHour(): void {
    let dates: Date[] = [new Date(2018, 1, 15), new Date(2018, 1, 17)];
    this.scheduleObj?.setWorkHours(dates, '11:00','20:00');
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));