Time Header Customization

The time header cells can be customized using the onBeforeTimeHeaderRender event handler. This event handler lets you set properties of each time header cell:

• change the content (plain text or HTML)

• change the background color

• add custom CSS class

• add active areas with icons that trigger custom actions

You can use the event handler to add custom date/time segments to the time headers, highlight certain days (current day, holidays), add custom time units, change the date format, add icons, context menu and so on.

For custom framework content, use an Angular timeHeader template, onBeforeTimeHeaderDomAdd in React or the Vue timeHeader slot. The framework sections below show each approach.

See Also

• Time Header Rows

• Hiding Time Columns

JavaScript Scheduler

In the JavaScript Scheduler component, use the onBeforeTimeHeaderRender event handler.

With progressive time header rendering, the callback runs as headers are needed for display or export. Use it to customize the supplied header.

Example: Week Numbers

This example modifies the text (args.header.html) of the second time header row (args.header.level === 1). It displays the text "Week" and the ISO 8601 week number.

dp.timeHeaders = [
  { groupBy: "Month" },
  { groupBy: "Week" },
  { groupBy: "Day", format: "d"}
];

dp.onBeforeTimeHeaderRender = function(args) {
  if (args.header.level === 1) {
    args.header.html = "Week " + args.header.start.weekNumberISO();
  }
};

Example: Highlighting Weekends

This example sets a custom background (args.header.backColor) and CSS class (args.header.cssClass) for weekend days.

dp.timeHeaders = [
    { groupBy: "Month", format: "MMM yyyy" },
    { groupBy: "Day", format: "d" }
];

dp.onBeforeTimeHeaderRender = function(args) {
    if (args.header.level === 1) {
        var dayOfWeek = args.header.start.getDayOfWeek();
        if (dayOfWeek === 0 || dayOfWeek === 6) {
            args.header.backColor = "#d0d0d0";
            args.header.cssClass = "weekend_header";
        }
    }
};

JavaScript Tutorials

• JavaScript Scheduler Time Header Customization

• JavaScript Scheduler: Highlighting Holidays

• JavaScript Scheduler: Custom Time Header Segments

• JavaScript Scheduler: Show Separators in the Time Header

API: events.list, resources.

The examples render both header levels in bold, using a weekday/date label for the day row and an hour number below it. The custom renderer checks the header level so every replaced header receives suitable content.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

Add an ng-template with daypilotTemplate="timeHeader" inside the Scheduler. Read the template's header context through let-header="header" and choose the format using header.level.

The ng-template example requires DayPilot Pro for Angular version 2026.4.7099 or later. Use Angular Scheduler templates for setup and supported contexts.

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"><ng-template daypilotTemplate="timeHeader" daypilotTemplateFor="scheduler" let-header="header"><strong>{{ header.start.toString(header.level === 0 ? "ddd d MMM" : "H") }}</strong></ng-template></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-03",
    days: 1,
    scale: "Hour",
    timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}]
  };

}

Angular Tutorials

• Angular Scheduler: Highlighting Holidays

React

Use onBeforeTimeHeaderDomAdd to supply JSX through args.element. The date and header level are available on args.header.

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-03"}
      days={1}
      scale={"Hour"}
      timeHeaders={[{groupBy: "Day"}, {groupBy: "Hour"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}]}
      onBeforeTimeHeaderDomAdd={args => { args.element = <strong>{args.header.start.toString(args.header.level === 0 ? "ddd d MMM" : "H")}</strong>; }}
    />
  </div>;
}

Vue

Provide the #timeHeader slot and destructure its header value. The slot formats header.start according to header.level.

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-03";
const days = 1;
const scale = "Hour";
const timeHeaders = [{groupBy: "Day"}, {groupBy: "Hour"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}];

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
    >
      <template #timeHeader="{header}"><strong>{{ header.start.toString(header.level === 0 ? "ddd d MMM" : "H") }}</strong></template>
    </DayPilotScheduler>
  </div>
</template>

Vue Tutorials

• Vue Scheduler: How to Display Holidays

protected void DayPilotScheduler1_BeforeTimeHeaderRender(object sender, DayPilot.Web.Ui.Events.BeforeTimeHeaderRenderEventArgs e)
{
  if (e.Level == 1)
  {
    e.InnerHTML = String.Format("Week {0}", Week.WeekNrISO8601(e.Start));
  }
}

protected override void OnBeforeTimeHeaderRender(BeforeTimeHeaderRenderArgs e)
{
  e.InnerHtml = String.Format("<span style='font-weight: bold'>{0}</span>", e.Start.ToShortDateString());
}

protected override void OnBeforeTimeHeaderRender(BeforeTimeHeaderRenderArgs e)
{
  if (e.Start.DayOfWeek == DayOfWeek.Saturday)
  {
    e.BackColor = "red";
  }
}

e.CssClass = "weekend_header";