DayPilot.Gantt.timeHeaders

The timeHeaders property (array) specifies the time header rows, including their grouping and date format.

Declaration

DayPilot.Gantt.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.

Default Value

[
  { "groupBy": "Month", "format": "MMMM yyyy" },
  { "groupBy": "Day", "format": "d" }
]

Notes

Each array item defines one time header row.

groupBy supports the following values:

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

• "Cell" uses a group size that corresponds to the cell size defined by DayPilot.Gantt.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.

• "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 gantt = new DayPilot.Gantt("dp", {
  timeHeaders: [
    { groupBy: "Month", format: "MMMM yyyy" },
    { groupBy: "Day", format: "d" },
    { groupBy: "Hour", format: "h" }
  ],
  // ...
});
gantt.init();

Angular

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

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

React

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

Vue

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

See Also

DayPilot.Gantt.scale

Time Header Rows [doc.daypilot.org]

DayPilot.Gantt Class