Flexible Timeline - JavaScript Scheduler

Timeline Scale

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

Hours

javascript-scheduler-scale-hours.png

dp.scale = "Hour";

Days

javascript-scheduler-scale-days.png

dp.scale = "Day";

Weeks

javascript-scheduler-scale-weeks.png

dp.scale = "Week";

Months

javascript-scheduler-scale-months.png

dp.scale = "Month";

Years

javascript-scheduler-scale-years.png

dp.scale = "Year";

Custom number of minutes

javascript-scheduler-scale-minutes.png

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

Non-Continuous Timeline

javascript-scheduler-hiding-non-business-hours.png

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

javascript-scheduler-scale-non-linear.png

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

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

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java