DayPilot.Scheduler.timeHeaders

The timeHeaders property (array) specifies the time header rows of the JavaScript Scheduler component.

Each time header row uses the specified group size. You can customize the height and date format.

Declaration

DayPilot.Scheduler.timeHeaders

Item Structure

• groupBy (string) specifies the group size used for the row.

• format (string) specifies the date/time format used for the row text; optional.

• height (number) sets the row height in pixels; optional. It overrides DayPilot.Scheduler.headerHeight.

Default Value

[ { "groupBy": "Default" }, { "groupBy": "Cell" } ]

Notes

groupBy supports the following values:

• "Default" uses the value specified by DayPilot.Scheduler.cellGroupBy for backwards compatibility.

• "Cell" uses a group size that corresponds to the cell size defined by DayPilot.Scheduler.scale.

• "Hour" groups the row by hour.

• "Day" groups the row by day.

• "Week" groups the row by week.

• "Month" groups the row by month.

• "Quarter" groups the row by quarter.

• "Year" groups the row by year.

• "None" disables grouping for the row.

The format value uses the pattern variables supported by DayPilot.Date.toString().

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  timeHeaders: [
    { groupBy: "Month", format: "MMMM yyyy" },
    { groupBy: "Day", format: "d" }
  ],
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  timeHeaders: [
    { groupBy: "Month", format: "MMMM yyyy" },
    { groupBy: "Day", format: "d" }
  ],
  // ...
};

React

<DayPilotScheduler
  timeHeaders={[
    { groupBy: "Month", format: "MMMM yyyy" },
    { groupBy: "Day", format: "d" }
  ]}
  {/* ... */}
/>

Vue

<DayPilotScheduler
  :timeHeaders="[
    { groupBy: 'Month', format: 'MMMM yyyy' },
    { groupBy: 'Day', format: 'd' }
  ]"
  <!-- ... -->
/>

See Also

DayPilot.Scheduler.onBeforeTimeHeaderRender

DayPilot.Scheduler.onBeforeTimeHeaderExport

Time Header Rows [doc.daypilot.org]

DayPilot.Scheduler Class