Alternate Row Colors

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

JavaScript

Alternate Colors of Grid Cells

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

onBeforeCellRender: (args) => {
    if (args.cell.y % 2) {
        args.cell.backColor = "#fff2cc"; // yellow
    }
};

To make sure that there are no adjacent rows with the same color (when some rows are hidden) you can use args.cell.displayY instead (available since 2019.1.3540). You have to disable beforeCellRenderCaching in this case:

beforeCellRenderCaching: false,
onBeforeCellRender: (args) => {
    if (args.cell.displayY % 2) {
        args.cell.backColor = "#fffaeb"; // yellow
    }
}

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

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

Alternate Colors of Row Headers

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

onBeforeRowHeaderRender: (args) => {
    if (args.row.index % 2) {
        args.row.backColor = "#f8eecf"; // yellow
    }
}

Note that args.row.index is a global index that doesn't change when certain rows are hidden (collapsed children, filter applied). You can also use args.row.displayY to get the current display Y position (excluding hidden rows):

onBeforeRowHeaderRender: (args) => {
  if (args.row.displayY % 2) {
      args.row.backColor = "#f8eecf"; // yellow
  }
};

The args.row.displayY property is available since 2019.1.3540.

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

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  if (e.Y % 2 == 0)
  {
      e.BackgroundColor = "#f9cb9c";
  }
}

protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
{
  if (e.Y % 2 == 0)
  {
      e.BackgroundColor = "#fce5cd";
  }
}