Set Different Work Hours in TypeScript Scheduler

By default, the work hours in the Scheduler are highlighted based on the start and end values defined within the workHours property, which applies uniformly to all days. If you need to highlight different work-hour ranges for specific days, you can use the setWorkHours method.

This method accepts:

  • A single date object or a collection of date objects as the first argument.
  • The start time as the second argument.
  • The end time as the third argument.

In the following example, clicking the button sets the work hours for February 15 and 17 to 11:00 AM – 8:00 PM, while other days continue to display their default work hours.

import { Schedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';

Schedule.Inject(Day, Week, WorkWeek, Month);

let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    workHours: {
        highlight: true,
        start: '09:00',
        end: '11:00'
    },
    views: ['Day', 'Week', 'WorkWeek', 'Month'],
    eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');

let button = document.querySelector('#btn1') as HTMLElement;
button.onclick = function () {
    var dates = [new Date(2018, 1, 15), new Date(2018, 1, 17)];
    scheduleObj.setWorkHours(dates, '11:00', '20:00');
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
    <style>
        .e-schedule .e-vertical-view .e-work-hours {
            background: #e7b3b3;
        }
    </style>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div class="col-lg-12 property-section">
        <button id="btn1">Change the work hours for thursday and saturday</button>
    </div>
    <div id="container">
        <div id="Schedule"></div>
    </div>
</body>

</html>