Row Auto Height in JavaScript Scheduler

By default, Scheduler rows in Timeline views have a fixed height. When multiple overlapping appointments occur in the same time range, the Scheduler shows a +n more indicator. Enable rowAutoHeight to auto-adjust row height so overlapping appointments are fully visible instead of being collapsed behind a +n more indicator.

Enable row auto height on Timeline and Month views by setting the rowAutoHeight property to true (default is false): rowAutoHeight.

Note: This feature applies to Timeline views and the calendar Month view.

The sections below demonstrate the feature with examples.

Calendar month view

By default, the Month view rows accommodate a limited number of appointments based on the available height; remaining overlapping appointments are shown as +n more. The example below shows the Month view auto-adjusting row height when rowAutoHeight is enabled.

Timeline views

When rowAutoHeight is enabled in Timeline views, row height is adjusted based on the number of overlapping events in the same time range. The following example demonstrates this behavior.

Timeline views with multiple resources

The following example shows how auto row adjustment behaves in Timeline views with multiple resources.

Appointments occupying entire cell

Appointments occupying entire cell

When rowAutoHeight is enabled, a small whitespace may remain at the bottom of each cell after appointments render. Set ignoreWhitespace to true in eventSettings to remove that space (default is false). The example below demonstrates this setting.

Note: The ignoreWhitespace property applies only when rowAutoHeight is enabled.

Refer to the JavaScript Scheduler feature tour for an overview, and explore the Scheduler demo for practical examples.