Virtual Rendering
Keep large calendars fast by rendering only what’s visible in the scroll area.
Normally a calendar builds every row and column up front, even ones scrolled far out of view. With virtual rendering (also called virtualization) turned on, only the rows and columns within or near the visible scroll area are rendered. As the user scrolls, elements that leave the viewport are removed and newly visible ones are rendered in their place. Turn it on with the virtualization setting.
Supported Views#
We plan to bring virtual rendering to nearly every calendar view. Here’s where it stands:
| View | What’s virtualized | Status |
|---|---|---|
| Timeline view with resources | Resources while scrolling vertically, dates and times while scrolling horizontally | Available |
| TimeGrid, DayGrid and vertical resource views | Whole days while scrolling horizontally, when dayMinWidth makes the columns scroll | Planned |
| Multi-Month Stack and Multi-Month Grid views | Months while scrolling vertically | Planned |
| List view | Days and events while scrolling vertically | Planned |
Until a view is marked available, the virtualization setting has no effect on it.
Timeline View#
In Timeline view with resources, virtual rendering works in both directions:
- Vertically: resource rows, resource group rows, and grouped resource columns
- Horizontally: time slots and their header cells, which helps when a small slotDuration spans a long date range
A timeline view without resources is not virtualized.
Scrolling#
When the calendar has a fixed height, it virtualizes against its own scroll area. When height is 'auto', the calendar doesn’t scroll on its own, so rows are virtualized against the browser window’s scroll position instead.
Things to Know#
Because off-screen rows and columns aren’t in the DOM, the browser’s find-in-page won’t match them, and code that queries the DOM directly will only see what’s currently rendered. To customize rows, use render hooks such as the resource lane render hooks, which run as each row is rendered.
Printed output is never virtualized, so every row is rendered. Use printMaxRows to cap how many rows are printed.