Color-code Resource unavailable Days/Hours?

6 posts, 0 answers
  1. AceRoute Dev
    AceRoute Dev avatar
    10 posts
    Member since:
    Dec 2013

    Posted 01 Feb 2014 Link to this post

    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?
  2.
  3. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 05 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. AceRoute Dev
    AceRoute Dev avatar
    10 posts
    Member since:
    Dec 2013

    Posted 13 Feb 2014 in reply to Vladimir Iliev Link to this post

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

    Posted 17 Feb 2014 Link to this post

    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. 

    Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Marshall Jones
    Marshall Jones avatar
    5 posts
    Member since:
    Jul 2009

    Posted 29 Oct 2014 in reply to Vladimir Iliev Link to this post

    Is the Current Group available yet?
  11. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 30 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top