javascript-scheduler-highlighting-unavailable-dates.png

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: "2016-01-01", end: "2016-04-01"}
         ] },
         { 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";
    }
};

Angular

Tutorial: