Color-code Resource unavailable Days/Hours?

[AceRoute Dev]

How do I shade days/time slots which a resource may not be available? I am not trying to restrict vent create but simply color-code time-slots.

Also, how do I change color of all time-slots for Saturday/Sunday to light-red?

[Vladimir Iliev]

Hi,

Please find the answers of your questions below:

1) How do I shade days/time slots which a resource may not be available? - You can use the "dataBound" event of the scheduler to get all slot objects and based on them to apply custom CSS class to the needed elements. Please check the example below:

dataBound: function (e) {
    var scheduler = this;
    var view = scheduler.view();

    view.table.find("td[role=gridcell]").each(function () {
        var element = $(this);
        var slot = scheduler.slotByElement(element);
        //your custom logic based on the slot object
        if (true) {
            element.addClass("customClass");
        }
        //based on above logic if needed add custom CSS class to the unavailable slots
    })
},

2) Also, how do I change color of all time-slots for Saturday/Sunday to light-red? - Basically changing the color of given slots is not supported out of the box, however as the "workWeekStart" and "workWeekEnd" options by default are set that the Saturday/Sunday are non-work days, their slots will be rendered with "k-nonwork-hour" CSS class. You can override that class to set the needed background color.

Regards,
Vladimir Iliev
Telerik

[AceRoute Dev]

Hi Vladimir - Thanks for response. Follow-up question on role=gridcell.

view.table.find("td[role=gridcell]").each(function () {
        var element = $(this);
        var slot = scheduler.slotByElement(element);
        //your custom logic based on the slot object
        if (true) {
            element.addClass("redClass");
        }
}

In my custom logic, how do I check what View/Resource/Date/Hour this slot is for?
Basically, my logic would be as follows:
1) For all slots where view!=Agenda and Resource Group is ON
2) For each Resource, change gridcell color to red if the gridcell hour is resource's non-working date/hour.

[Vladimir Iliev]

Hi,

Basically you should use one of the following methods, however the returned 'slot' object currently doesn't contain information about current group of the slot. That why we decided to include such information and from next internal builds the slot object will contain the current group as well. 

• slotByPosition
• slotByElement

Regards,
Vladimir Iliev
Telerik

[Marshall Jones]

Is the Current Group available yet?

[Vladimir Iliev]

Hello,

The current group index is already returned by the methods described in my previous reply - please check the example below:

var target = $($(".k-scheduler-content td[role=gridcell]")[0]);
var slot = scheduler.slotByElement(target);

//result:
Object {
    startDate: Date 2013-06-08 T21:00:00.000 Z,
    endDate: Date 2013-06-09 T21:00:00.000 Z,
    groupIndex: 0,
    element: < td.k-state-border-down> ,
    isDaySlot: true
}

Regards,
Vladimir Iliev
Telerik