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");

// ...

dp.cellWidth = 80;
dp.scale = "Manual";
dp.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);

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

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

// the default business cell logic needs to be turned off
dp.onBeforeCellRender = args => {
    args.cell.business = true;
};

dp.init();

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

Angular Scheduler

Tutorial:

• Angular Scheduler: Timeline Customization

ASP.NET WebForms

Custom Timeline Example

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:

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 Scheduler

Example

@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);
}