DevExtreme Scheduler – Virtual Scrolling (v20.2)

DevExtreme Scheduler now ships with a Virtual Scrolling option. When enabled, Virtual Scrolling allows you to efficiently render large lists of appointments and event resources without noticeable performance degradation. This feature is available for Angular, React, Vue and jQuery - in Week, Day, and WorkWeek views when using vertical group orientation.

The screencast below helps illustrate this feature in action - thousands of appointments grouped by resources are instantly rendered when scrolling the contents of the Scheduler.

Virtual Scrolling Under the Hood

When Virtual Scrolling is enabled, only visible appointments and groups are rendered to the web browser’s DOM and removed once appointments/groups leave the Scheduler’s viewport during scroll operations. This solution significantly improves scrolling performance and initial render time.

This approach mimics Virtual Scrolling support in our JS DataGrid.

Configuration

We recommend that you enable this new feature within your app. To do this, simply set the 'scrolling.mode' option to 'virtual' as shown below:

scrolling: { 
   mode: 'virtual'
}

Future Plans

As you would expect, Virtual Scrolling support will be introduced for both the Scheduler's Timeline View and to horizontal groups. We’ll update you on progress once we have specific information to share in this regard.

Feedback

Please try our new Scheduler Virtual Scrolling and let us know what you think of this new capability. Should you have any questions or suggestions, feel free to leave a comment below or submit a support ticket via the DevExpress Support Center.

Free DevExpress Products - Get Your Copy Today