Scheduler Timeline

Usually, the timeline is generated automatically based on the scale, startDate and days properties. See also the predefined scale options. You can also create a custom timeline if you switch scale to the "Manual" mode.

The custom timeline can be non-continuous (certain time periods are missing) and non-linear (not all time cells have the same duration). You can also customize the time cell width.

JavaScript Scheduler

In the JavaScript Scheduler component, you can use the timeline property to create a custom timeline by specifying individual time cells.

Timeline cell properties:

• start (DayPilot.Date or string in ISO 8601 format)

• end (DayPilot.Date or string in ISO 8601 format)

• width (integer, specifies cell width in pixels; optional)

Example: Custom 8-hour shifts (starting at 10pm, 6am, and 4pm)

const dp = new DayPilot.Scheduler("dp", {
  cellWidth: 80,
  scale: "Manual",
  timeline: generateTimeline(),
  timeHeaders: [
    {groupBy: "Day", format: "d MMMM yyyy"},
    {groupBy: "Cell", format: "HH:mm"}
  ],
  onBeforeCellRender: args => {
    args.cell.business = true;
  },
  // ...
});
dp.init();


function generateTimeline() {

  const timeline = [];

  const first = DayPilot.Date.today();
  const days = 30;

  for (let i = 0; i < days; i++) {
    const day = first.addDays(i);
    const start = day.addDays(-1).addHours(22);
    const end = start.addHours(8);

    timeline.push({start, end});
    timeline.push({start: start.addHours(8), end: start.addHours(16)});
    timeline.push({start: start.addHours(16), end: start.addHours(24)});
  }

  return timeline;
}

Example: Non-Linear Timeline

const dp = new DayPilot.Scheduler("dp");

// ...

dp.scale = "Manual";
dp.timeline = [];

const first = new DayPilot.Date("2021-10-25");
const days = 7;
const months = 4;

// day cells
for (let i = 0; i < days; i++) {
    const day = {};
    day.start = first.addDays(i);
    day.end = day.start.addDays(1);
    dp.timeline.push(day);
}


// month cells
for (let i = 0; i < months; i++) {
    const month = {};
    month.start = first.addDays(days).addMonths(i);
    month.end = month.start.addMonths(1);
    month.width = 100;
    dp.timeline.push(month);
}

dp.timeHeaders = [
    {groupBy: "Month", format: "MMMM yyyy"},
    {groupBy: "Cell", format: "d"}
];

dp.onBeforeTimeHeaderRender = function (args) {
    if (args.header.level === 1) {
        var duration = new DayPilot.Duration(args.header.start, args.header.end);
        if (duration.totalDays() > 1) {
            args.header.html = "";
        }
    }
};

dp.init();

Demo

• JavaScript Scheduler: Custom Timeline Demo

API: timeline.

The examples build five manual slots for November 2 through 6, each running from 9 AM to 6 PM. Gaps between those slots remove non-working time from every resource's timeline.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Manual",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "ddd d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    timeline: Array.from({length: 5}, (_, i) => { const day = new DayPilot.Date("2026-11-02").addDays(i); return {start: day.addHours(9), end: day.addHours(18)}; })
  };

}

• Angular Scheduler: Timeline Customization

  React

  Copy

  import React from "react";
  import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";
  
  export default function SchedulerExample() {
  
    return <div>
  
      <DayPilotScheduler
        startDate={"2026-11-01"}
        days={30}
        scale={"Manual"}
        timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "ddd d"}]}
        resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
        events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
        timeline={Array.from({length: 5}, (_, i) => { const day = new DayPilot.Date("2026-11-02").addDays(i); return {start: day.addHours(9), end: day.addHours(18)}; })}
      />
    </div>;
  }

  Vue

  Copy

  <script setup>
  import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";
  
  const startDate = "2026-11-01";
  const days = 30;
  const scale = "Manual";
  const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "ddd d"}];
  const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
  const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
  const timeline = Array.from({length: 5}, (_, i) => { const day = new DayPilot.Date("2026-11-02").addDays(i); return {start: day.addHours(9), end: day.addHours(18)}; });
  
  </script>
  
  <template>
    <div>
  
      <DayPilotScheduler
        :startDate="startDate"
        :days="days"
        :scale="scale"
        :timeHeaders="timeHeaders"
        :resources="resources"
        :events="events"
        :timeline="timeline"
      />
    </div>
  </template>

  ASP.NET WebForms

  Custom Timeline Example

  Copy

  private void CreateTimeline()
  {
    DayPilotScheduler1.Scale = TimeScale.Manual;
    DayPilotScheduler1.Timeline.Clear();
  
    // this month
    DateTime first = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
    int duration = DateTime.DaysInMonth(first.Year, first.Month);
    for (int i = 0; i < duration; i++)
    {
        DateTime start = first.AddDays(i);
        DateTime end = start.AddDays(1);
        DayPilotScheduler1.Timeline.Add(start, end);
    }
  }

  Non-Linear Timeline Example

  

  The time cells in the custom timeline don't have to use the same duration and width.

  The following example creates a timeline showing the current month (one day per cell) and three subsequent months (one month per cell).

  Example:

  Copy

  private void CreateTimeline()
  {
    DayPilotScheduler1.Scale = TimeScale.Manual;
    DayPilotScheduler1.Timeline.Clear();
  
    // this month
    DateTime first = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
    int duration = DateTime.DaysInMonth(first.Year, first.Month);
    for (int i = 0; i < duration; i++)
    {
        DateTime start = first.AddDays(i);
        DateTime end = start.AddDays(1);
        DayPilotScheduler1.Timeline.Add(start, end);
    }
  
    // three additional months
    first = first.AddDays(duration);
    for (int i = 0; i < 3; i++)
    {
        DateTime start = first.AddMonths(i);
        DateTime end = start.AddMonths(1);
        DayPilotScheduler1.Timeline.Add(start, end, 100);
    }
  }

  Java

  Example

  Copy

  @Override
  public void onInit() throws Exception {
  
      setScale(TimeScale.MANUAL);
  
      getTimeline().clear();
      
  
      DateTime start = new DateTime("2019-02-09T00:00:00");
      for (int i = 0; i < 24; i++) {
        getTimeline().add(start.addHours(i * 4), start.addHours((i + 1) * 4));
      }
  
      update(UpdateType.FULL);
  }

  Availability

  Availability of this feature in DayPilot editions:

  Product	Lite	Pro
  DayPilot for JavaScript	No Support	Full Support
  DayPilot for ASP.NET WebForms	No Support	Full Support
  DayPilot for ASP.NET MVC	No Support	Full Support
  DayPilot for Java	No Support	Full Support