Time Header Groups

You can specify custom group size and date/time format for the time header rows.

The result time header HTML can be further customized using BeforeTimeHeaderRender event.

Group Sizes (GroupBy)

Supported group sizes (and the default format string):

Hour

Default date/time format pattern: "H"

Day

Default date/time format pattern: the format string specifed using datePattern property of the current locale, "M/d/yyyy" for Locale.US

Week

Default string: ISO week number if the week starts on Monday, otherwise the US week number

Month

Default date/time format pattern: "MMMM yyyy"

Quarter

Date/time format example: "Q1"

Year

Default date/time format pattern: "yyyy"

None

A single cell, uses an empty string.

Cell

Cell size corresponds to the cell duration.

Default

Uses the value defined using CellGroupBy property. This is a legacy option.

JavaScript

Example:

dp.timeHeaders = [
  { groupBy: "Year" },
  { groupBy: "Month" },
  { groupBy: "Day" }
];

Tutorials

• JavaScript Scheduler: Custom Time Header Segments

API: events.list, resources.

The examples combine month, week and day header groups above a daily grid. Choosing header groups does not change the grid's scale.

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

Angular

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"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Week"}, {groupBy: "Day", format: "ddd d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Week"}, {groupBy: "Day", format: "ddd d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
    />
  </div>;
}

Vue

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

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Week"}, {groupBy: "Day", format: "ddd d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
    />
  </div>
</template>