Scheduler Timeline

Usually, the timeline is generated automatically using Scale (+CellDuration), StartDate and Days properties.

You can also create a custom timeline if you switch Scale to "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

Use DayPilot.Scheduler.timeline property.

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:

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.scale = "Manual";
  dp.timeline = [];

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


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

  dp.init();
</script>

Demo

• JavaScript Scheduler: Custom Timeline Demo

Angular

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

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