javascript scheduler marking cells as unavailable

JavaScript

In this example, the unavailable dates are defined using "unavailable" property of the resource object. The property name can be changed. The unavailability data can also be stored outside of the resource object but storing it there is convenient because we can use the built-in lookup tools (see onBeforeCellRender below):

dp.resources = [
    {
        name: "Locations", id: "G1", expanded: true, children: [
            {
                name: "Room 1", id: "A", unavailable: [
                    {start: "2023-09-05", end: "2023-09-08"},
                    {start: "2023-09-13", end: "2023-09-15"}
                ]
            },
            {name: "Room 2", id: "B"},
            {name: "Room 3", id: "C"},
            {name: "Room 4", id: "D"}
        ]
    },
];

You can highlight the unavailable dates using onBeforeCellRender event handler.

dp.onBeforeCellRender = function(args) {
    var row = dp.rows.find(args.cell.resource);
    var unavailable = row.data.unavailable;
    if (!unavailable) {
        return;
    }
    var matches = unavailable.some(function(range) {
        var start = new DayPilot.Date(range.start);
        var end = new DayPilot.Date(range.end).addDays(1);
        return DayPilot.Util.overlaps(start, end, args.cell.start, args.cell.end);
    });

    if (matches) {
        args.cell.backColor = "#ea9999";
    }
};

Tutorial:

API: onBeforeCellRender.

The framework examples shade a fixed interval in Room A, November 6 and 7. They change only the background color; use disabled cells when the same interval must reject drag-and-drop operations.

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.resource === "A" && args.cell.start < new DayPilot.Date("2026-11-08") && args.cell.end > new DayPilot.Date("2026-11-06")) { args.cell.properties.backColor = "#eeeeee"; } }
  };

}

  • Angular Scheduler: Highlighting Holidays

    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.resource === "A" && args.cell.start < new DayPilot.Date("2026-11-08") && args.cell.end > new DayPilot.Date("2026-11-06")) { args.cell.properties.backColor = "#eeeeee"; } }}
    />
  </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.resource === "A" && args.cell.start < new DayPilot.Date("2026-11-08") && args.cell.end > new DayPilot.Date("2026-11-06")) { args.cell.properties.backColor = "#eeeeee"; } };

</script>

<template>
  <div>

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

    Availability

    Availability of this feature in DayPilot editions:

    ProductLitePro
    DayPilot for JavaScript
    DayPilot for ASP.NET WebForms
    DayPilot for ASP.NET MVC
    DayPilot for Java