DayPilot.Gantt.timeline

The timeline property (array) specifies a custom timeline for the Gantt chart.

Declaration

DayPilot.Gantt.timeline

Item Structure

• start (DayPilot.Date or string in ISO 8601 format) specifies the start of a timeline cell.

• end (DayPilot.Date or string in ISO 8601 format) specifies the end of a timeline cell.

• width (number) specifies the cell width in pixels; optional.

Notes

Each array item defines one custom timeline cell.

Examples

JavaScript

Define the custom timeline directly in the configuration:

const gantt = new DayPilot.Gantt("dp", {
  scale: "Manual",
  timeline: [
    { start: "2034-01-01T00:00:00", end: "2034-01-02T00:00:00" },
    { start: "2034-01-02T00:00:00", end: "2034-01-03T00:00:00" }
  ],
  // ...
});
gantt.init();

Build the custom timeline programmatically:

const gantt = new DayPilot.Gantt("dp", {
  scale: "Manual",
  timeline: [],
  // ...
});

for (let i = 0; i < 31; i++) {
  const day = {};
  day.start = gantt.startDate.addDays(i);
  day.end = day.start.addDays(1);
  gantt.timeline.push(day);
}

for (let i = 0; i < 3; i++) {
  const month = {};
  month.start = gantt.startDate.addDays(31).addMonths(i);
  month.end = month.start.addMonths(1);
  month.width = 100;
  gantt.timeline.push(month);
}

gantt.init();

Angular

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

config: DayPilot.GanttConfig = {
  scale: "Manual",
  timeline: [
    { start: "2034-01-01T00:00:00", end: "2034-01-02T00:00:00" },
    { start: "2034-01-02T00:00:00", end: "2034-01-03T00:00:00" }
  ],
  // ...
};

React

<DayPilotGantt
  scale="Manual"
  timeline={[
    { start: "2034-01-01T00:00:00", end: "2034-01-02T00:00:00" },
    { start: "2034-01-02T00:00:00", end: "2034-01-03T00:00:00" }
  ]}
  {/* ... */}
/>

Vue

<DayPilotGantt
  scale="Manual"
  :timeline="[
    { start: '2014-01-01T00:00:00', end: '2014-01-02T00:00:00' },
    { start: '2014-01-02T00:00:00', end: '2014-01-03T00:00:00' }
  ]"
  <!-- ... -->
/>

See Also

DayPilot.Gantt Class