Highlight Scheduler cells

[Dean]

Hello,
I use Kendo Scheduler in my solution, and use the collection of Employees as resources for columns. Each of the employees has his/her own work hours, so I want to highlight cells grey for non-working hours and white for working hours in each column. But I could not find any appropriate solution. Is it even possible using to?

Best Regards

[Vladimir Iliev]

Hi David,

Coloring individual cells in the Scheduler table is not supported out of the box and custom solution would be needed. For example you can iterate over the cells in the Scheduler content and based on their current time and group (get using "slotByElement" method) to apply custom CSS styles.

e.g.:

var scheduler = $("#scheduler").data("kendoScheduler");

var view = scheduler.view();

var elements = view.content.find("td");

for (var i = 0; i < elements.length; i++) {

    var slot = scheduler.slotByElement($(elements[i]));

    if (slot.groupIndex == 1) { //check in which group is this slot


        $(slot.element).css({ background: "red" }); //apply CSS styles


    } else {

 

        var startSlotMilliseconds = kendo.date.getMilliseconds(slot.startDate);

        var endSlotMilliseconds = kendo.date.getMilliseconds(slot.endDate);

             //check in which hour is current slot


        if (startSlotMilliseconds / kendo.date.MS_PER_HOUR > 10 &&

            endSlotMilliseconds / kendo.date.MS_PER_HOUR < 12) {

 

            $(slot.element).css({ background: "green" }); //apply CSS


        }

    }

}

Regards,
Vladimir Iliev
Telerik

 

 

[Mohomed]

Hi, is it possible to do the same for the Gantt charts also. I need to insert custom time markers, and for that I need the time at each of the gantt time columns. I have been unable to do it for the Gantt. I tried the following, but it isn't working.

$('<div class="new-time-marker"></div>').prependTo('.k-grid-header tr:nth-child(2) th');
console.log("The time marker method was called...");
console.log($('.k-grid-header tr:nth-child(2) th'));
var slots = $('.k-grid-header tr:nth-child(2) th');
var setOffsetTop = 0;
var setTime = new Date('2017-10-13T10:00:00');
for (var i = 0; i < slots.length; i++) {
  var slot = e.sender.slotByElement($(slots[i]));
  console.log(slot);
    if (slot != null) {
          if (slot.startDate.getHours() == setTime.getHours() && slot.startDate.getMinutes() ==setTime.getMinutes()) {
                     setOffsetTop = slot.element.offsetTop;
                     break;
           }
     }
}
$('.new-time-marker').css('top', setOffsetTop + 'px');

[Mohomed]

Hi, is it possible to do the same with the Gantt chart. I need to implement custom time markers and I need the times of each of the gantt columns. I tried the following but it isn't working. Any Suggestions please ?

$('<div class="new-time-marker"></div>').prependTo('.k-grid-header tr:nth-child(2) th');
    console.log("The time marker method was called...");
    console.log($('.k-grid-header tr:nth-child(2) th'));
    var slots = $('.k-grid-header tr:nth-child(2) th');
    var setOffsetTop = 0;
    var setTime = new Date('2017-10-13T10:00:00');
    for (var i = 0; i < slots.length; i++) {
        var slot = e.sender.slotByElement($(slots[i]));
        console.log(slot);
        if (slot != null) {
            if (slot.startDate.getHours() == setTime.getHours() && slot.startDate.getMinutes() == setTime.getMinutes()) {
            setOffsetTop = slot.element.offsetTop;
            break;
            }
        }
    }

    $('.new-time-marker').css('top', setOffsetTop + 'px');

[Mohomed]

Sorry about the double post, I thought the first one failed. Never mind the second one, it's the same.

[Nencho]

Hello Mohomed,

As I can see, a valuable suggestion and solution for that case was provided in the other forum thread, that you had submitted on the same matter:

https://www.telerik.com/forums/custom-time-markers-for-gantt-charts

Regards,
Nencho
Progress Telerik