DayPilot.Calendar.timeHeaders

Defines the vertical time-header columns beside the Calendar grid. Each array item adds one header level with its own grouping, label format and width.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.timeHeaders

Default Value

null

Level Properties

• groupBy: "Minute", "Hour", "Day", "Week", "Month", "Quarter", "Year", "Cell" or "None". "Default" is an alias for "Day".
• format: optional date format for the label.
• width: optional positive width in pixels; defaults to hourWidth.

Behavior

There is no fixed maximum number of levels. Level indexes start at zero, in array order. "Cell" follows individual timeline cells; "None" provides one unlabeled interval over the displayed range. Grouped headers follow hidden intervals and variable cell heights.

null restores the default time headers using timeHeaderCellDuration and hourWidth. An empty array displays no time-header levels. showHours can hide the time-header area. Use onBeforeTimeHeaderRender to customize a level's content or style.

These examples configure an existing DayPilot Pro Calendar. Keep its event data and other options.

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  startDate: "2028-04-03",
  viewType: "Resources",
  days: 7,
  columns: [{id: "A", name: "Cedar room"}],
  scale: "Hour",
  showNonBusiness: false,
  timeHeaders: [
    {groupBy: "Day", format: "ddd M/d", width: 80},
    {groupBy: "Hour", format: "H:mm", width: 60}
  ]
});
calendar.init();

Angular

Add the configuration to an existing Calendar component.

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

import {DayPilot} from "daypilot-pro-angular";

config: DayPilot.CalendarConfig = {
  startDate: "2028-04-03",
  viewType: "Resources",
  days: 7,
  columns: [{id: "A", name: "Cedar room"}],
  scale: "Hour",
  showNonBusiness: false,
  timeHeaders: [
    {groupBy: "Day", format: "ddd M/d", width: 80},
    {groupBy: "Hour", format: "H:mm", width: 60}
  ]
};

React

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

<DayPilotCalendar
  startDate="2028-04-03"
  viewType="Resources"
  days={7}
  columns={[{id: "A", name: "Cedar room"}]}
  scale="Hour"
  showNonBusiness={false}
  timeHeaders={[
    {groupBy: "Day", format: "ddd M/d", width: 80},
    {groupBy: "Hour", format: "H:mm", width: 60}
  ]}
/>

Vue

<script setup lang="ts">
import {DayPilot, DayPilotCalendar} from "daypilot-pro-vue";
const columns: NonNullable<DayPilot.CalendarConfig["columns"]> = [{id: "A", name: "Cedar room"}];
const timeHeaders: NonNullable<DayPilot.CalendarConfig["timeHeaders"]> = [
    {groupBy: "Day", format: "ddd M/d", width: 80},
    {groupBy: "Hour", format: "H:mm", width: 60}
  ];
</script>

<template>
  <DayPilotCalendar
    startDate="2028-04-03"
    viewType="Resources"
    :days="7"
    :columns="columns"
    scale="Hour"
    :showNonBusiness="false"
    :timeHeaders="timeHeaders"
  />
</template>

See Also

Grouped Time Headers · DayPilot.Calendar Class