Working Days in JavaScript Scheduler
The Scheduler supports several calendar-specific features, including options to:
- Set a custom time range display
- Configure working hours
- Define working days
- Set the first day of the week
- Show or hide weekend days
- Show the week number
Set working days
By default, working days are Monday–Friday ([1,2,3,4,5], where 1 = Monday, 2 = Tuesday, etc.). Days not included in the working days collection are treated as non-working days. When weekend days are hidden, non-working days are removed from the layout.
The Work Week and Timeline Work Week views display only the defined working days. Other views show every day but visually distinguish non-working days.
Working hours apply only to the specified working days.
The following example shows how to configure the Scheduler to use Monday, Wednesday, and Friday as working days.
Hiding weekend days
Use showWeekend to show or hide weekend days. This property does not apply to Work Week view, which already displays only working days. By default, showWeekend is true.
For example, if working days are [1, 3, 4, 5], the remaining days (0, 2, 6 — Sunday, Tuesday, and Saturday) are treated as non-working and will be hidden when showWeekend is set to false.
Show week numbers
Enable week numbers in the header by setting showWeekNumber to true (default: false). In Month view, week numbers appear as the first column.
showWeekNumber does not apply to Timeline views — use the headerRows option for equivalent behavior with additional customization.
Different options in showing week numbers
By default, week numbers follow the first-day-of-year rule. You can choose other rules:
-
FirstDay— first week is based on the first day of the year. -
FirstFourDayWeek— first week is the first one that contains four or more days. -
FirstFullWeek— first week begins when the first day of the week (firstDayOfWeek) coincides with or follows the first day of the year.
For details, see the Microsoft documentation on CalendarWeekRule.
Note: Enable showWeekNumber to use the weekRule property; weekRule depends on the value of firstDayOfWeek.
Set working hours
Working hours indicates the work hour limit within the Scheduler, which is visually highlighted with an active color on work cells. The working hours can be set on Scheduler using the workHours property which is of object type and includes the following sub-options,
-
highlight– Enables or disables the highlighting of work hours. -
start- sets the start time of the working/business hour of a day. -
end- sets the end time limit of the working/business hour of a day.
Scheduler displaying custom hours
Set the visible time range by configuring startHour and endHour.
The example below shows the Scheduler set to display 7:00 AM–6:00 PM; hours outside that range are hidden.
Setting start day of the week
By default, the Scheduler uses Sunday as the first day of the week. Change it with firstDayOfWeek using values 0–6 (Sunday=0, Monday=1, etc.).
Scroll to specific time and date
The Scheduler can be manually scrolled to a specific time on Scheduler using the scrollTo method as shown in the following code example.
How to scroll to current time on initial load
In scenarios where the Scheduler needs to load displaying the system’s current time on the currently visible viewport area, the Scheduler needs to be scrolled to a specific time based on the system’s current time, as shown in the following code example.
Refer to the JavaScript Scheduler feature tour for an overview, and visit the Scheduler demo for interactive examples.