Planby uses virtual rendering to paint only the events that are currently visible in the viewport. Events outside the view are not in the DOM at all — they exist only as data.

This means loading 10,000 events looks identical to loading 100 from the browser's perspective. The scheduler calculates which items intersect the current viewport rectangle and renders only those.

• Events outside viewport are never mounted
• Instant initial render regardless of dataset size
• No progressive loading or pagination needed
• Memory footprint stays constant

Windowing (also called list virtualization) means the scheduler only renders the rows and columns that fit in the current window — the "window" of visibility.

Both horizontal (time axis) and vertical (channels/resources axis) windowing are applied simultaneously. Scrolling in any direction swaps old items out and new items in — all without the user noticing any change.

• Bidirectional windowing: horizontal & vertical
• Overscan buffer keeps scroll feel instant
• Works with dynamic row heights
• No layout shifts during scroll

A large DOM is the most common cause of slow React apps. Layout thrashing, style recalculations, and garbage collection overhead grow linearly with DOM size.

Planby keeps its DOM footprint constant regardless of how many events you load. The number of rendered nodes depends on viewport size, not dataset size. This makes it predictable and profiler-friendly.

Smooth scrolling in a data-heavy scheduler is a hard engineering problem. Planby solves it by keeping the critical rendering path as short as possible.

Scroll events trigger a position recalculation, which updates only the items that enter or leave the viewport. React sees a small, surgical diff — not a full re-render of thousands of components.