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 .timeline property (array).

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>

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.png

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