Flexible Timeline - JavaScript Scheduler

Timeline Scale

Read more about the scheduler scale [doc.daypilot.org].


javascript scheduler scale hours

dp.scale = "Hour";


javascript scheduler scale days

dp.scale = "Day";


javascript scheduler scale weeks

dp.scale = "Week";


javascript scheduler scale months

dp.scale = "Month";


javascript scheduler scale years

dp.scale = "Year";

Custom number of minutes

javascript scheduler scale minutes

dp.scale = "CellDuration";
dp.cellDuration = 15;

Non-Continuous Timeline

javascript scheduler hiding non business hours

You can hide non-business hours and days (e.g. weekends) from the timeline.

dp.showNonBusiness = false;
dp.businessBeginsHour = 6;
dp.businessEndsHour = 18;

You can customize the timeline further by hiding custom time cells using onIncludeCell:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.onIncludeTimeCell = function(args) {
    if (args.cell.start.getHours() === 13) { // lunch break
      args.cell.visible = false;
  // ...

Read more about hiding non-business hours [doc.daypilot.org].

Non-Linear Timeline

javascript scheduler scale non linear

The time line doesn't have to be linear. This allows to display days of the current month using one day per cell scale and the following months using one month per cell.

Read more about using a custom timeline [doc.daypilot.org].

Time Header Rows

javascript scheduler time headers

Specify the time header rows (level), their scale units (day, week, month, etc). and date/time format.

dp.timeHeaders = [ 
  {groupBy: 'Month'}, 
  {groupBy: 'Week'},
  {groupBy: 'Day', format: "d"}

Read more about time header rows and groups [doc.daypilot.org].

Time Header Cell Customization

You can customize the individual time header cells using onBeforeTimeHeader render event:

dp.onBeforeTimeHeaderRender = function(args) {
  if (args.header.start.getDayOfWeek() === 6) {
    args.header.html = "Sat";

Read more about time header customization [doc.daypilot.org].