Flexible Timeline - JavaScript Scheduler

Timeline Scale

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

Hours

dp.scale = "Hour";

Days

dp.scale = "Day";

Weeks

dp.scale = "Week";

Months

dp.scale = "Month";

Years

dp.scale = "Year";

Custom number of minutes

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

Non-Continuous Timeline

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;
    }
  };
  // ...
  dp.init();
</script>

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

Non-Linear Timeline

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

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