# Virtual Rendering

> FullCalendar v7 documentation. Web version: https://fullcalendar.io/docs/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](https://fullcalendar.io/docs/virtualization.md) 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](https://fullcalendar.io/docs/timeline-view.md) with resources | Resources while scrolling vertically, dates and times while scrolling horizontally | Available |
| [TimeGrid](https://fullcalendar.io/docs/timegrid-view.md), [DayGrid](https://fullcalendar.io/docs/daygrid-view.md) and [vertical resource](https://fullcalendar.io/docs/vertical-resource-view.md) views | Whole days while scrolling horizontally, when [dayMinWidth](https://fullcalendar.io/docs/dayMinWidth.md) makes the columns scroll | Planned |
| [Multi-Month Stack](https://fullcalendar.io/docs/multimonth-stack.md) and [Multi-Month Grid](https://fullcalendar.io/docs/multimonth-grid.md) views | Months while scrolling vertically | Planned |
| [List view](https://fullcalendar.io/docs/list-view.md) | 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](https://fullcalendar.io/docs/timeline-view.md) with resources, virtual rendering works in both directions:

- **Vertically:** resource rows, resource group rows, and [grouped resource columns](https://fullcalendar.io/docs/resourceColumns.md)
- **Horizontally:** time slots and their header cells, which helps when a small [slotDuration](https://fullcalendar.io/docs/slotDuration.md) spans a long date range

A [timeline view without resources](https://fullcalendar.io/docs/timeline-view-no-resources.md) is not virtualized.


## Scrolling

When the calendar has a fixed [height](https://fullcalendar.io/docs/height.md), 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](https://fullcalendar.io/docs/resource-lane-render-hooks.md), which run as each row is rendered.

Printed output is never virtualized, so every row is rendered. Use [printMaxRows](https://fullcalendar.io/docs/printMaxRows.md) to cap how many rows are printed.

## Articles

- [virtualization](https://fullcalendar.io/docs/virtualization.md) - Whether to only render the rows and columns currently visible in the scroll viewport.

## See Also

- [Timeline View](https://fullcalendar.io/docs/timeline-view.md) - Timeline view has a customizable horizontal time axis, with resources as rows.
- [Resource Display](https://fullcalendar.io/docs/resource-display.md) - Control the visual aspects of your resources, such as ordering and text.
- [height](https://fullcalendar.io/docs/height.md) - Sets the height of the entire calendar, including header and footer.
- [printMaxRows](https://fullcalendar.io/docs/printMaxRows.md) - The maximum number of rows to render when printing.