You can display alternate row colors using the BeforeCellRender (grid cells) and BeforeRowHeaderRender (row headers) event handlers.

JavaScript

Alternate Colors for the Grid Cells

html5-scheduler-alternate-row-color-grid-cells.png

Use onBeforeCellRender event to read the row index (args.cell.y) and set the background color (args.cell.backColor) or CSS class (args.cell.cssClass).

Example

dp.onBeforeCellRender = function(args) {
    if (args.cell.y % 2) {
        args.cell.backColor = "#fff2cc"; // yellow
    }
    else {
        args.cell.backColor = "#fce5cd";  // brown
    }
};

You can also just add a special CSS class to cells in every second row:

dp.onBeforeCellRender = function(args) {
  if (args.cell.y % 2) {
    args.cell.cssClass = "alternate";
  }
};

Alternate Colors for the Row Headers

html5-schedule-alternate-row-color-headers.png

Use onBeforeRowHeaderRender to read the row index (args.row.index) and set the background color (args.row.backColor) accordingly:

dp.onBeforeRowHeaderRender = function(args) {
    if (args.row.index % 2) {
        args.row.backColor = "#ffe599"; // yellow
    }
    else {
        args.row.backColor = "#f9cb9c";  // brown
    }
};

ASP.NET WebForms

Alternate Colors for the Grid Cells

Note: BeforeCellRenderEventArgs.X and Y properties are available since 8.3.3573.

protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
{
  if (e.Y%2 == 1)
  {
      e.BackgroundColor = "#ffe599"; // yellow
  }
  else {
      e.BackgroundColor = "#f9cb9c";  // brown
  }
}