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.

API: onBeforeCellRender.

The framework examples use the cell's row index, args.cell.y, for alternating backgrounds. If hidden rows must be excluded from the stripe sequence, use the displayY approach and caching setting described above.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    onBeforeCellRender: args => { if (args.cell.y % 2 === 1) { args.cell.properties.backColor = "#f1f5f9"; } }
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      onBeforeCellRender={args => { if (args.cell.y % 2 === 1) { args.cell.properties.backColor = "#f1f5f9"; } }}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const onBeforeCellRender = args => { if (args.cell.y % 2 === 1) { args.cell.properties.backColor = "#f1f5f9"; } };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onBeforeCellRender="onBeforeCellRender"
    />
  </div>
</template>

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