The JavaScript Scheduler combines progressive rendering with on-demand event and resource loading. These capabilities address different parts of a large board: the elements rendered in the browser, the booking data downloaded, the resource hierarchy, and the length of the timeline.

Progressive Event Rendering

JavaScript Scheduler Progressive Rendering of a Large Timeline

Progressive event rendering creates event boxes near the viewport as users scroll, instead of creating every loaded event element during initialization. The event data stays available in the browser while the displayed elements follow the visible part of the board.

This supports large event sets without requiring an equally large initial set of event elements. It works alongside custom event presentation; the cost of that content still depends on what the application puts inside each box.

Progressive Row and Time Headers

Progressive row rendering applies the same principle to resource headers. A long resource list can keep its hierarchy and header information while preparing nearby rows as they are needed. Progressive row and event rendering are available in both Lite and Pro.

DayPilot Pro also supports progressive time-header rendering. A long date range with several levels of headers does not need every header element at initial display. The progressive time-header demo demonstrates this part of the timeline.

On-Demand Event Loading

Dynamic event loading fetches bookings for the requested dates and resources as the user scrolls. Your endpoint can filter a much larger booking history to the portion required by the view.

Rendering and loading are independent: progressive rendering limits displayed elements, while dynamic loading limits the event data supplied to the browser. They can be combined, so the application does not have to choose between fetching a relevant window and rendering it progressively.

The dynamic-loading tutorial includes a complete client and backend example.

Dynamic Resource Trees

JavaScript Scheduler Resource Tree with Sticky Group Headers

A resource hierarchy can begin with departments, sites, or teams, then use dynamic resource-tree loading to fetch children when a branch is opened. This keeps the initial resource payload smaller while leaving the full hierarchy accessible.

Loading child rows and loading their events remain separate capabilities. Together they support boards that open a relevant branch of a large operation and display its bookings for the current date window. The resources overview covers grouping, header information, and resource interaction.

Long Timelines and Coordinated Views

Infinite scrolling moves the displayed date window beyond its initial range, and zoom connects broad planning with detailed scheduling. These navigation options work with the rendering and loading mechanisms rather than requiring the entire planning history on screen at once.

The best combination depends on the number of resources, events, time cells, and custom controls in the application. The timeline overview describes the display choices; the scrolling-performance documentation explains the rendering behavior in more detail.