Kendo Scheduler slots are not colored in a single time itself. taking long time to load..

[Anil]

Hi,

  In Kendo Scheduler I need to add colour to the slots based on the start and End date 
(i.e.) If startdate is Monday 10AM and EndDate is Tuesday 12PM means inbetween the slots are need to fill with yellow colour refer to not available period.

The start and End days are dynamically changed based on that the slots colour are need to change. 
currently I am using the following code to colored but it take long time to process. It took each slot one by one by.

I need based on start and End date, the in between slots are need to colored in a single shot itself, it should not loop for each and every slots in the table.

view.table.find("td[role=gridcell]").each(function () {
if ($(this) != null) {
var selectSlot = $(this)
var slot = scheduler.slotByElement(selectSlot);
/Comparing the start and Endate  and coloured
if ((slot.startdate >= startdate) && (slot.enddate <= enddate) //dummy conditions
selectSlot.addClass("slot-selected");
}
});

[Tyler]

Here is a dojo with how to achieve this (there were several syntax errors in your code snippet, not sure if that was just a copy paste issue though...). This does loop through each slot and assigns a color. It is done in the dataBound event of the scheduler so it does it each time the scheduler refreshes itself from navigation, CRUD operation, etc...

This is really the only way to go about doing this... There isn't a function to only get slots in a certain time range. You can get all the slots, then use JQuery $.grep to get an array of only the slots in that time range, then loop through those, but $.grep will take an array and loop through the whole thing, so it is essentially the same thing...

There does exist another option that may be available to you. You can change the color of work hour slots in css, then just update the scheduler's view work hours and refresh the view with the new work hours (You can change the non work hour slot background to not be grayed out as well. That will take away your need to loop through anything, it will just require some css and then setting new work hours whenever the startdate and enddate you were originally comparing against changes.