DayPilot.Calendar.headerLevelHeights

The headerLevelHeights property (number[]) specifies custom heights of JavaScript Calendar column header rows when a hierarchy of columns is used.

If specified, these values are used instead of DayPilot.Calendar.headerHeight. The values are in pixels.

Available since 2024.4.6293.

Declaration

DayPilot.Calendar.headerLevelHeights

Notes

Use this property when a multi-level header needs different row heights instead of a single shared headerHeight value.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  headerLevelHeights: [50, 100],
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  headerLevelHeights: [50, 100],
  // ...
};

React

<DayPilotCalendar
  headerLevelHeights={[50, 100]}
  {/* ... */}
/>

Vue

<DayPilotCalendar
  :headerLevelHeights="[50, 100]"
  <!-- ... -->
/>

See Also

DayPilot.Calendar.headerHeight

Column Header Hierarchy [doc.daypilot.org]

Column Header Customization [doc.daypilot.org]

Time Header [doc.daypilot.org]

DayPilot.Calendar Class