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

JavaScript

Alternate Colors of 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
    }
};

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:

dp.beforeCellRenderCaching = false;
dp.onBeforeCellRender = function(args) {
    if (args.cell.displayY % 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 of 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
    }
};

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):

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

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

ASP.NET WebForms

Alternate Colors of Grid Cells

asp-net-scheduler-alternate-grid-row-colors.png

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

Alternate Colors of Row Headers

asp-net-scheduler-alternate-row-color.png

Note: BeforeResHeaderRenderEventArgs.Y property is available since 2019.1.3694.

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