Timescale in JavaScript Scheduler

Time slots are the individual time cells displayed in Day, Week, and Work Week views (left in calendar views; top in timeline views). Use the timeScale property to control slot duration and appearance. The main options are:

  • enable — When true, grid lines indicate each slot and appointments align to precise durations; when false, slots are not shown. Default: true.
  • interval — Major slot duration in minutes (e.g., 60 for one hour). Default: 60.
  • slotCount — Number of minor slots per major interval. Default: 2 (each hour split into two 30-minute slots).

Note: the maximum number of slots rendered per day (interval × slotCount) is 1000 due to HTML table colspan limits. This restriction applies to TimelineDay, TimelineWeek, and TimelineWorkWeek views.

Setting different time slot durations

Combine interval and slotCount to create custom slot durations. For example, interval: 60 with slotCount: 6 produces six 10-minute slots per hour.

Customizing time cells using templates

The timeScale property also provides template options for customizing the appearance of time slots:

  • majorSlotTemplate – Template for major time slots. Accepts a string or HTMLElement, and displays parsed content in the major time cells. Time details are accessible within the template.
  • minorSlotTemplate – Template for minor time slots. Accepts a string or HTMLElement, and displays parsed content in the minor time cells. Time details are accessible within the template.

Hiding the timescale

Grid lines indicating time durations can be toggled in the Scheduler by setting the enable option within the timeScale property to true or false. The default value is true.

Highlighting current date and time

By default, the Scheduler highlights the current date in the date header on all views and marks the current system time in Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. To disable the current time indicator, set the showTimeIndicator property to false. The default value is true.

Refer to the JavaScript Scheduler feature tour for a comprehensive overview of its capabilities. Explore the JavaScript Scheduler example to see how to present and manipulate data effectively.