Virtual Scrolling

With virtual scrolling, you can improve the overall performance of your application and reduce load times when our Scheduler component is bound to a large data set. When virtual scrolling is enabled, our Scheduler only renders visible appointments. When an appointment leaves the viewport, the Scheduler removes it from the DOM. The data set in this demo contains 100 groups with 9 appointments each.

To enable virtual scrolling mode, set the scrolling.mode property to "virtual".

Virtual scrolling support is available in the following Scheduler views: "day", "week", and "workWeek".

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

ASP.NET Core

ASP.NET MVC

Copy to CodePen

Apply

Reset

$(function () { var resources = generateResources(); var appointments = generateAppointments(); $("#scheduler").dxScheduler({ height: 600, dataSource: appointments, views: [{ type: 'day', groupOrientation: 'vertical', name: '2 Days', intervalCount: 2 }, { type: 'day', groupOrientation: 'vertical', name: '3 Days', intervalCount: 3 }, { type: "workWeek", name: 'Work Week', groupOrientation: "vertical" }], startDayHour: 9, endDayHour: 18, currentView: "3 Days", scrolling: { mode: 'virtual' }, showAllDayPanel: false, currentDate: new Date(2021, 8, 6), groups: ["resourceId"], resources: [{ fieldExpr: "resourceId", dataSource: resources }] }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.2.7/js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="scheduler"></div> </div> </body> </html>