Features

  • JavaScript Scheduler component that displays timeline on the horizontal axis and resources on the vertical axis
  • You can use customization event handlers of the Scheduler component to set alternate background color of the time headers and grid cells
  • Includes a trial version of DayPilot Pro for JavaScript (see also License below)
  • This JavaScript/HTML5 project was generated using Scheduler UI Builder

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

JavaScript Scheduler Setup

javascript-scheduler-alternate-column-colors-setup.png

For an introduction to using the JavaScript Scheduler component please see the HTML5 Scheduler tutorial.

Alternating Colors of Time Headers

javascript-scheduler-alternate-time-header-colors.png

We will use onBeforeTimeHeaderRender event handler to customize the appearance of the time header cells.

When displaying one day per column, we can use day of year as column index. Every second cell in the second time header row will be highlighted using a custom background color.

dp.timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format:"d"}],
dp.scale = "Day";
dp.onBeforeTimeHeaderRender = function(args) {
  var i = args.header.start.getDayOfYear();
  if (args.header.level === 1 && i % 2) {
    args.header.backColor = "#ccc";
  }
};

Note: DayPilot.Date.getDayOfYear() method is available in DayPilot Pro for JavaScript since version 2018.3.3402.

When displaying one hour per column, we can calculate the column index from the hour of day:

dp.timeHeaders = [{groupBy: "Day", format:"d"}, {groupBy: "Hour"}],
dp.scale = "Hour";
dp.onBeforeTimeHeaderRender = function(args) {
  var i = args.header.start.getHours();
  if (args.header.level === 1 && i % 2) {
    args.header.backColor = "#ccc";
  }
};

Alternating Colors of Grid Columns

javascript-scheduler-alternate-grid-column-colors.png

The grid cell background color can be set using onBeforeCellRender event handler:

dp.onBeforeCellRender = function(args) {
  var i = args.cell.start.getDayOfYear();
  if (i % 2) {
    args.cell.backColor = "#e0e0e0";
  }
};