Usually, the timeline is generated automatically based on the scalestartDate 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)

javascript scheduler timeline custom shifts

const dp = new DayPilot.Scheduler("dp", {
  cellWidth: 80,
  scale: "Manual",
  timeline: generateTimeline(),
  timeHeader: [
    {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

javascript scheduler 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

Angular Scheduler

Tutorial:

React Scheduler

This React Scheduler example creates a timeline with one cell per day, where each day is limited to 9 AM - 6 PM.

import React, { useState, useEffect } from 'react';
import { DayPilot, DayPilotScheduler } from "daypilot-pro-react";

const Scheduler = () => {
    const createTimeline = () => {
        const days = DayPilot.Date.today().daysInMonth();
        const start = DayPilot.Date.today().firstDayOfMonth();

        const result = [];
        for (let i = 0; i < days; i++) {
            const day = start.addDays(i);
            result.push({
                start: day.addHours(9),
                end: day.addHours(18)
            });
        }
        return result;
    }

    const [config, setConfig] = useState({
        timeline: createTimeline(),
        scale: "Manual",
        timeHeaders: [
            { groupBy: "Month" },
            { groupBy: "Day", format: "d" },
        ],
    });

    return (
        <DayPilotScheduler 
           {...config}
        />
    );
};

export default Scheduler;

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

scheduler asp.net timeline non linear

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

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