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
Angular Scheduler
Tutorial:
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); }