DayPilot.Scheduler.timeline

The timeline property (array) specifies a custom Scheduler timeline.

Declaration

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

To use a custom timeline, scale muset be set to "Manual".

Examples

JavaScript

Define the custom timeline directly in the configuration:

const dp = new DayPilot.Scheduler("dp", {
  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" }
  ],
  // ...
});
dp.init();

Build the custom timeline programmatically:

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

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

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

dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  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" }
  ],
  // ...
};

React

<DayPilotScheduler
  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" }
  ]}
  {/* ... */}
/>

Vue

<DayPilotScheduler
  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

Timeline [doc.daypilot.org]

DayPilot.Scheduler Class