Highlighting Unavailable Cells

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:

• JavaScript Scheduler: Displaying Holidays

Angular

Tutorial:

• Angular Scheduler: Highlighting Holidays