Timescale in TypeScript Scheduler control

18 Nov 20182 minutes to read

Time slots are the individual time cells displayed in the Day, Week, and Work Week views of the Scheduler—positioned to the left in calendar views and at the top in timeline views. The timeScale property enables precise control over the time slot duration and appearance for Scheduler work cells. The timeScale property includes the following sub-options:

  • enable – When set to true, the Scheduler displays appointments accurately against the exact time duration, with grid lines indicating each slot. If set to false, all appointments for a day are shown one below the other without grid lines. Default is true.
  • interval – Defines the duration of each major time slot in minutes (e.g., 60 for 1 hour, 30 for 30 minutes). Default is 60.
  • slotCount – Specifies how many minor slots each major interval is divided into. Default is 2, so each hour is split into two 30-minute slots.

Note: The maximum number of slots that can be rendered in a single day using the interval and slotCount properties is 1000. This limit matches the maximum colspan value allowed for the HTML table element. This restriction applies only to the TimelineDay, TimelineWeek, and TimelineWorkWeek views.

Setting different time slot durations

The interval and slotCount properties can be combined to set custom time slot durations. For example, setting interval to 60 and slotCount to 6 creates six 10-minute slots per hour, as shown in the following example.

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.