DayPilot.Scheduler.onBeforeTimeHeaderRender

The onBeforeTimeHeaderRender event handler fires before the JavaScript Scheduler renders a time header cell. You can use it to customize the time header cells.

During image export, you can further customize time headers using DayPilot.Scheduler.onBeforeTimeHeaderExport.

Declaration

DayPilot.Scheduler.onBeforeTimeHeaderRender(args)

Parameters

• args.header.areas (array of DayPilot.Area Properties) - active areas; see the JavaScript Scheduler Time Header Customization tutorial

• args.header.backColor (string) - background color of the time header cell

• args.header.bubbleHtml (string) - static bubble content used by DayPilot.Scheduler.timeHeaderBubble (available since 2025.3.6583)

• args.header.cssClass (string) - CSS class applied to the header cell

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

• args.header.text (string) - text that is HTML-encoded and displayed when args.header.html is null

• args.header.html (string) - raw HTML that overrides the default text; the default value is null

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

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

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

Notes

Use args.header.html for custom markup in the browser. When args.header.html is not set, the value of args.header.text is HTML-encoded before display.

To use different text or styling in exported images, handle DayPilot.Scheduler.onBeforeTimeHeaderExport.

The args.header.bubbleHtml property works together with DayPilot.Scheduler.timeHeaderBubble and is available since 2025.3.6583.

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 dp = new DayPilot.Scheduler("dp", {
  onBeforeTimeHeaderRender: (args) => {
    if (args.header.start.getDayOfWeek() === 6) {
      args.header.html = "Sat";
    }
  },
  // ...
});
dp.init();

Angular

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

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

React

<DayPilotScheduler
  onBeforeTimeHeaderRender={onBeforeTimeHeaderRender}
/>

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

Vue

<DayPilotScheduler
  @beforeTimeHeaderRender="onBeforeTimeHeaderRender"
/>

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

See Also

Time Header Customization [doc.daypilot.org]

JavaScript Scheduler Time Header Customization [code.daypilot.org]

DayPilot.Scheduler.onBeforeTimeHeaderExport

DayPilot.Scheduler.timeHeaderBubble

DayPilot.Scheduler Class