Progressive Time Header Rendering

Progressive time header rendering helps the JavaScript Gantt chart load long timelines faster. Time headers appear as the user scrolls, so an application can show a large date range without displaying every header at once.

The feature is enabled by default in DayPilot Pro for JavaScript since version 2026.4.7080. No configuration change is required.

Try the progressive time header rendering demo with a monthly view or hourly timelines spanning one or three years. Switch progressive rendering on and off, then use Start, Middle, and End to navigate between project phases.

Adjust Scrolling Performance

Start with the defaults. If custom headers are slow to appear during scrolling, increase progressiveTimeHeaderRenderingMargin. The default margin is 200 pixels on each side of the visible area; this example uses 400:

JavaScript

const dp = new DayPilot.Gantt("dp", {
  startDate: "2027-01-01",
  days: 365,
  scale: "Day",
  timeHeaders: [
    {groupBy: "Month"},
    {groupBy: "Day", format: "d"}
  ],
  progressiveTimeHeaderRenderingMargin: 400
});
dp.init();

A larger margin can make scrolling smoother, but uses more memory and can increase loading time.

Two other settings let you tune the behavior:

• progressiveTimeHeaderRenderingCacheSize (default 200) controls how many additional headers are cached for scrolling back. Increase it for faster return to recently viewed dates, or lower it to reduce memory use.

• scrollDelayTimeHeaders (default 0 milliseconds) delays additional headers until scrolling pauses. A positive value can help with complex custom content, but newly visible header areas may remain blank during the delay.

Angular

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

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

@Component({
  selector: 'app-gantt-example',
  standalone: true,
  imports: [DayPilotModule],
  template: `<daypilot-gantt [config]="config"></daypilot-gantt>`
})
export class GanttExampleComponent {
  config: DayPilot.GanttConfig = {
    startDate: "2027-01-01",
    days: 365,
    scale: "Day",
    progressiveTimeHeaderRenderingMargin: 400,
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    tasks: [{id: "planning", text: "Project planning", start: "2027-01-04", end: "2027-01-15"}]
  };
}

React

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

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

const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];

const tasks = [{id: "planning", text: "Project planning", start: "2027-01-04", end: "2027-01-15"}];

export default function GanttExample() {
  return (
    <DayPilotGantt
      startDate="2027-01-01"
      days={365}
      scale="Day"
      progressiveTimeHeaderRenderingMargin={400}
      timeHeaders={timeHeaders}
      tasks={tasks}
    />
  );
}

Vue

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

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

const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];

const tasks = [{id: "planning", text: "Project planning", start: "2027-01-04", end: "2027-01-15"}];
</script>

<template>
  <DayPilotGantt
    startDate="2027-01-01"
    :days="365"
    scale="Day"
    :progressiveTimeHeaderRenderingMargin="400"
    :timeHeaders="timeHeaders"
    :tasks="tasks"
  />
</template>

Customize Time Headers

Use onBeforeTimeHeaderRender to set each header’s text, colors, or other properties. With progressive rendering enabled, the callback runs as headers are needed for display or export. It does not run for every header during initialization.

Keep the callback focused on the supplied header. If an existing application requires all header callbacks to run during initialization, disable progressiveTimeHeaderRendering:

dp.update({progressiveTimeHeaderRendering: false});

Custom DOM, React and Vue headers are supported. For interactive headers, store values that must survive scrolling or view updates in application state.

Keep Labels Visible

Use floatingTimeHeaders to keep labels readable when only part of a long header is visible. Custom controls keep their state as the label moves. scrollDelayFloats sets the delay before an existing floating label follows the scroll position.

Image Export

Export includes the headers for the requested date range, even if the user has not scrolled through it. Use onBeforeTimeHeaderExport to specify text and styling for the exported image.