Time Header Cell Duration

In the Pro version, you can use the following vertical time‑header units:

• Auto (default): one‑hour units when the scale value is under one hour, or a value that matches the current scale otherwise.

• A custom number of minutes (any whole number ≥ 1).

In the Lite version, you can set the time‑header unit to a specific number of minutes (1 – 60).

The time‑header units do not have to match the cell duration.

You can adjust the unit length with the timeHeaderCellDuration property, and you can customize the header cell content with the onBeforeTimeHeaderRender event handler.

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  timeHeaderCellDuration: 30
});
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 = {
  timeHeaderCellDuration: 30
};

React

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

<DayPilotCalendar
  timeHeaderCellDuration={30}
/>

Vue

<script setup lang="ts">
import {DayPilot, DayPilotCalendar} from "daypilot-pro-vue";

</script>

<template>
  <DayPilotCalendar
    :timeHeaderCellDuration="30"
  />
</template>

<DayPilot:DayPilotCalendar runat="server" ID="DayPilotCalendar1"
  TimeHeaderCellDuration="30"
  ...
/>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 

  // ...
  TimeHeaderCellDuration = 30,
  // ...
	
})