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(),
  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

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

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;

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

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

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