Scheduler - Virtual Scrolling

[AntonSermyazhko]

Scheduler - Virtual Scrolling

The Problem

Scheduler users may experience performance issues if a Scheduler view contains many resources, groups, or appointments.

The Proposed Solution

We will implement Virtual Scrolling. In this mode, our Scheduler renders only visible UI elements within a view. Once a UI element leaves the visible view area, the Scheduler removes it from the DOM. This reduces the DOM size and significantly improves performance.

The Virtual Scrolling API allows developers to do the following:

• Set the scrolling mode for the whole widget:

    scrolling: { mode:  'standard' || 'virtual' } 

• Set the scrolling mode for an individual view:

    views: [ { …, scrolling: { mode:  'standard' || 'virtual' } } ]

mode's value can be either of the following strings:

• standard - rows and appointments are rendered simultaneously.

• virtual - rows and appointments are rendered when they get into the viewport and removed once they leave it.

Try It

Live Sandboxes

Virtual Scrolling sample

We Need Your Feedback

Take a Quick Poll

Do you find virtual scrolling in the Scheduler useful?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

[AntonSermyazhko]

We have updated the discussion page with a live sandbox sample.

[radomeit]

Hi, basically this feature is great and will allow us to deliver a much smoother scheduler experience to our users.
Since we only use the timeline view mode, I modified and tested your example with it, but it seems that virtual scrolling doesn't work here (it takes some time before the scheduler shows up, probably cause its rendering all appointments) and also the vertical scrollbars are hidden / you can't scroll down, so you can see only 8 resources instead of 30: https://codepen.io/radomeit/pen/vYKBjBM
Did I miss sth.?

[AntonSermyazhko]

Hi, basically this feature is great and will allow us to deliver a much smoother scheduler experience to our users.
Since we only use the timeline view mode, I modified and tested your example with it, but it seems that virtual scrolling doesn't work here (it takes some time before the scheduler shows up, probably cause its rendering all appointments) and also the vertical scrollbars are hidden / you can't scroll down, so you can see only 8 resources instead of 30: https://codepen.io/radomeit/pen/vYKBjBM
Did I miss sth.?

Hi,
Currently, the Scheduler widget supports the Virtual Scrolling functionality only in the 'day', 'week', 'workWeek' views. We will reflect this limitation in our documentation. We have plans to support this functionality for timeline views. However, it is unlikely we add it in v20.2.

[bbarber9]

We were forced to use another scheduler component due to the poor performance of the timeline view. This would be game changing in the timeline view for us.

[MaximKudriavtsev]

Thanks to everybody who gave us early feedback on this feature. The feature is now available in the v20.2 release.

Currently, the Scheduler component supports the Virtual Scrolling functionality only in the day, week, workWeek views, and with vertical grouping. We will add this feature to Timelines, and it will work with horizontal grouping in future releases.

I'm closing this thread. In the case of bugs or questions, feel free to create new GitHub issues or tickets in our Support Center.

[radomeit]

Hi @MaximKudriavtsev , can you give any time schedule, when this great functionality will be available for the timeline view as well?

[MaximKudriavtsev]

Hi @radomeit,

This feature is a high priority for us. We are working on it right now. Virtual scrolling in timelines will be available in v21.1 (June-July 2021). I will update this topic once we have any news.