DayPilot.Gantt.onBeforeTimeHeaderRender

The onBeforeTimeHeaderRender event handler fires before a Gantt time header cell is rendered and lets you customize the time header content and appearance.

Declaration

DayPilot.Gantt.onBeforeTimeHeaderRender(args)

Parameters

• args.header.areas (array) - active areas

• args.header.backColor (string) - background color

• args.header.cssClass (string) - custom CSS class

• args.header.end (DayPilot.Date) - cell end (read-only)

• args.header.html (string) - custom HTML

• args.header.level (number) - header row index (read-only, zero-based)

• args.header.start (DayPilot.Date) - cell start (read-only)

• args.header.toolTip (string) - tooltip text

Notes

Use args.header.level to distinguish individual time header rows when multiple levels are displayed. The args.header.start and args.header.end values are read-only.

When the Handler Runs

Since version 2026.4.7080, progressiveTimeHeaderRendering is enabled by default. This handler runs as headers are needed for display or export. It does not run for every header during initialization.

Use the handler to set the supplied header’s content and appearance. Scrolling back to a previously displayed header does not call it again; a full update calls it again for the headers needed by the updated view.

If your application requires the callback to run for all headers during initialization, set progressiveTimeHeaderRendering: false.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  onBeforeTimeHeaderRender: (args) => {
    if (args.header.start.getDayOfWeek() === 6) {
      args.header.html = "Sat";
    }
  },
  // ...
});
gantt.init();

Angular

<daypilot-gantt [config]="config"></daypilot-gantt>

config: DayPilot.GanttConfig = {
  onBeforeTimeHeaderRender: (args) => {
    if (args.header.start.getDayOfWeek() === 6) {
      args.header.html = "Sat";
    }
  },
  // ...
};

React

<DayPilotGantt
  onBeforeTimeHeaderRender={onBeforeTimeHeaderRender}
/>

const onBeforeTimeHeaderRender = (args) => {
  if (args.header.start.getDayOfWeek() === 6) {
    args.header.html = "Sat";
  }
};

Vue

<DayPilotGantt
  @beforeTimeHeaderRender="onBeforeTimeHeaderRender"
/>

const onBeforeTimeHeaderRender = (args) => {
  if (args.header.start.getDayOfWeek() === 6) {
    args.header.html = "Sat";
  }
};

See Also

DayPilot.Gantt.onBeforeTimeHeaderExport

DayPilot.Gantt Class