Highlighting Weekends

The Scheduler applies a special CSS class to business cells (workdays). The default CSS theme uses it to highlight weekends. You can also use BeforeCellRender event to customize the weekend background color. See also cell customization.

JavaScript

dp.onBeforeCellRender = function(args) {
  if (args.cell.start.getDayOfWeek() === 0 || args.cell.start.getDayOfWeek() === 6) {
      args.cell.backColor = "silver";
  }
};

API: onBeforeCellRender.

The examples override Saturday and Sunday backgrounds with a light yellow color. The cells remain available for scheduling.

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 => {
      const day = args.cell.start.getDayOfWeek();
      if (day === 0 || day === 6) { args.cell.properties.backColor = "#fff2cc"; }
    }
  };

}

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 => {
        const day = args.cell.start.getDayOfWeek();
        if (day === 0 || day === 6) { args.cell.properties.backColor = "#fff2cc"; }
      }}
    />
  </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 => {
  const day = args.cell.start.getDayOfWeek();
  if (day === 0 || day === 6) { args.cell.properties.backColor = "#fff2cc"; }
};

</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.Start.DayOfWeek == DaysOfWeek.Saturday || e.Start.DayOfWeek == DaysOfWeek.Sunday)
  {
    e.BackgroundColor = "silver";
  }
}

protected override void OnBeforeCellRender(BeforeCellRenderArgs e)
{
  if (e.Start.DayOfWeek == DaysOfWeek.Saturday || e.Start.DayOfWeek == DaysOfWeek.Sunday)
  {
    e.BackgroundColor = "silver";
  }
}