Row Auto Height in TypeScript Scheduler

By default, the height of Scheduler rows in Timeline views is static and therefore, when the same time range holds multiple overlapping appointments, a +n more text indicator is displayed. When the row auto height feature is enabled, all overlapping appointments present in those specific time ranges can be viewed by auto-adjusting the row height based on the number of appointments instead of displaying the +n more text indicator.

To enable auto row height adjustments in Scheduler Timeline views and the Month view, set the rowAutoHeight property to true; its default value is false.

Note: This auto row height adjustment is applicable only to Timeline views and the calendar Month view.

The following sections demonstrate how this feature works on the applicable views with practical examples.

Calendar month view

By default, the rows of the calendar Month view can accommodate only a limited number of appointments based on the available row height, and the rest of the overlapping appointments are indicated with a +n more text indicator. The following example shows how the Month view row auto-adjusts based on the number of appointments when this rowAutoHeight feature is enabled.

Timeline views

When the rowAutoHeight feature is enabled in Timeline views, the row height is auto-adjusted based on the number of overlapping events in the same time range, as demonstrated in the following example.

Timeline views with multiple resources

The following example shows how the auto row adjustment feature works on timeline views with multiple resources.

Appointments occupying entire cell

By default, when the rowAutoHeight feature is enabled, a small space remains at the bottom of each cell after appointments are rendered. To avoid this space, the ignoreWhitespace property is set to true within eventSettings, whereas its default value is false. In the following code example, the whitespace below the appointments has been ignored.

Note: The ignoreWhitespace property is only applicable when the rowAutoHeight feature is enabled in the Scheduler.

Refer to the JavaScript Scheduler feature tour page for its groundbreaking feature representations. Also explore our JavaScript Scheduler example to learn how to present and manipulate data.