JavaScript Scheduler: Alternate Column Colors | DayPilot Code

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

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

Alternating Colors of Time Headers

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

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";
  }
};