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

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

JavaScript Scheduler Setup

javascript scheduler alternate column colors setup

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

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 = (args) => {
  const i = args.header.start.getDayOfYear();
  if (args.header.level === 1 && i % 2) {
    args.header.backColor = "#ffe599";
  }
};

The DayPilot.Date.dayOfYear() method returns the day of year (1-366).

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 = (args) => {
  var i = args.header.start.getHours();
  if (args.header.level === 1 && i % 2) {
    args.header.backColor = "#ffe599";
  }
};

Alternating Colors of Grid Columns

javascript scheduler alternate grid column colors

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

dp.onBeforeCellRender = (args) => {
  const i = args.cell.start.dayOfYear();
  if (i % 2) {
    args.cell.backColor = "#fff2cc";
  }
};