Progressive Row Rendering

JavaScript Scheduler progressive row rendering creates row headers near the visible viewport as the user scrolls. It reduces the amount of header content that needs to be displayed at once when scheduling many resources.

The feature is enabled by default. The resource list is still loaded in the application; progressive rendering controls when row header elements are created and removed. It does not fetch additional resources from the server.

Configure the Viewport and Buffer

Give the Scheduler a fixed-height viewport and supply your resource list. The progressiveRowRenderingPreload setting adds a buffer above and below the visible rows; its default is 25.

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  startDate: "2026-10-01",
  days: 31,
  scale: "Day",
  heightSpec: "Fixed",
  height: 400,
  progressiveRowRendering: true,
  progressiveRowRenderingPreload: 25,
  resources: Array.from({length: 1000}, (_, i) => ({
    id: "room-" + (i + 1),
    name: "Room " + (i + 1)
  }))
});
dp.init();

The example assumes that the DayPilot library is loaded and a <div id="dp"></div> element is present. Replace the generated rooms with your application data. Increase the buffer if custom headers appear too late when scrolling; decrease it to keep fewer off-screen headers rendered.

Angular

Set the options and data in a typed DayPilot.SchedulerConfig object and bind it to the Angular component.

import {Component} from '@angular/core';
import {DayPilot, DayPilotModule} from 'daypilot-pro-angular';

@Component({
  selector: 'app-scheduler-example',
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-10-01",
    days: 31,
    scale: "Day",
    heightSpec: "Fixed",
    height: 400,
    progressiveRowRendering: true,
    progressiveRowRenderingPreload: 25,
    resources: Array.from({length: 1000}, (_, i) => ({
      id: "room-" + (i + 1),
      name: "Room " + (i + 1)
    }))
  };
}

React

Pass the display options and data as individual props to DayPilotScheduler.

import {DayPilotScheduler} from 'daypilot-pro-react';

const resources = Array.from({length: 1000}, (_, i) => ({
  id: "room-" + (i + 1),
  name: "Room " + (i + 1)
}));

export default function SchedulerExample() {
  return (
    <DayPilotScheduler
      startDate="2026-10-01"
      days={31}
      scale="Day"
      heightSpec="Fixed"
      height={400}
      progressiveRowRendering={true}
      progressiveRowRenderingPreload={25}
      resources={resources}
    />
  );
}

Vue

This Vue single-file component binds the options and data directly to DayPilotScheduler.

<script setup>
import {DayPilotScheduler} from 'daypilot-pro-vue';

const resources = Array.from({length: 1000}, (_, i) => ({
  id: "room-" + (i + 1),
  name: "Room " + (i + 1)
}));
</script>

<template>
  <DayPilotScheduler
    startDate="2026-10-01"
    :days="31"
    scale="Day"
    heightSpec="Fixed"
    :height="400"
    :progressiveRowRendering="true"
    :progressiveRowRenderingPreload="25"
    :resources="resources"
  />
</template>

Custom and Interactive Headers

Rich HTML, custom DOM elements, and framework content can be used in row headers. A header can be removed when it leaves the viewport and created again when the user returns. Keep persistent values, such as a bookmarked resource or an edited label, in application state and use that state when rendering the header.

Compare Rendering Modes

The progressive row rendering demo includes up to 100,000 rows, flat or grouped resources, and plain, rich, or interactive headers. Bookmark a resource in the interactive view, scroll away, and return to see the selection retained.

Choose 10,000 rows or fewer to compare progressive rendering on and off. The larger demo presets keep it enabled. Performance depends on header content, the amount of data, and the browser.

To render all row headers in advance, disable progressiveRowRendering and row header width auto-fit together:

dp.update({
  progressiveRowRendering: false,
  rowHeaderWidthAutoFit: false
});

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  ProgressiveRowRendering="true"
  ProgressiveRowRenderingPreload="20"
  >
</DayPilot:DayPilotScheduler>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ProgressiveRowRendering = true,
  ProgressiveRowRenderingPreload = 20
})