Highlight Scheduler cells

6 posts, 0 answers
  1. Dean
    Dean avatar
    12 posts
    Member since:
    Jul 2012

    Posted 06 Nov 2014 Link to this post

    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
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2203 posts

    Posted 10 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Mohomed
    Mohomed avatar
    22 posts
    Member since:
    Sep 2017

    Posted 16 Oct 2017 in reply to Vladimir Iliev Link to this post

    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');
  4. Mohomed
    Mohomed avatar
    22 posts
    Member since:
    Sep 2017

    Posted 16 Oct 2017 in reply to Vladimir Iliev Link to this post

    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');
  5. Mohomed
    Mohomed avatar
    22 posts
    Member since:
    Sep 2017

    Posted 16 Oct 2017 in reply to Mohomed Link to this post

    Sorry about the double post, I thought the first one failed. Never mind the second one, it's the same.
  6. Nencho
    Admin
    Nencho avatar
    1874 posts

    Posted 18 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top