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.

If exported output needs different text or styling, handle DayPilot.Scheduler.onBeforeTimeHeaderExport as well because image export uses a separate export pipeline.

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

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