RadScheduler TimeSlotCreated not working when appointment is being edited

2 posts, 0 answers
  1. Gonzalo
    Gonzalo avatar
    4 posts
    Member since:
    Jun 2013

    Posted 23 Jul 2019 Link to this post

    Good morning,

    I am using radScheduler to schedule appointments for employees. Employees have different work schedules each day so I am highlighting their available slots using TimeSlotCreated. Everything works perfectly except for when I try to edit an appointment, all the highlighting disappears. Attached are some images of the process. You can see Jim Bergland is available from 9:00AM to 5:00PM and the light blue background is displaying for him but as soon as I try to edit any of the two existing appointments the background color in the slots is removed.

    I know this fact about TimeSlotCreated: "The TimeSlotCreated event is not fired after the advanced edit form is opened (it fires before that, and rendering the advanced form renders the scheduler anew). Thus, customizations for the time slots made in the handler are not rendered while the advanced edit form is visible."

    Is there any other way to achieve the time slot shading during the appointment edits?



  2. Peter Milchev
    Peter Milchev avatar
    654 posts

    Posted 26 Jul 2019 Link to this post

    Hello Gonzalo,

    Generally, the scheduler timeslots should be inactive when the advanced form is visible, either inline or as a popup. 

    For example, the following element is added to the Advanced form so that it makes it look modal:

    <div unselectable="on" class="TelerikModalOverlay"
        style="position: fixed; left: 0px; top: 0px; z-index: 2500; background-color: rgb(170, 170, 170); opacity: 0.5; width: 100%; height: 100%;">

    Unfortunately, there is no easy way to set the color of the timeslots. A possible custom implementation would be iterating all timeslot elements and getting their TimeSlot object from the scheduler.get_activeModel(): 

    <telerik:RadCodeBlock runat="server">
            function pageLoadHandler() {
                window.scheduler = $find("<%= RadScheduler1.ClientID %>");
                    .find(".rsContentTable tr>td")
                    .each(function (ind, timeslotElement) {
                        var timeslot = scheduler.get_activeModel().getTimeSlotFromDomElement(timeslotElement);
                        // use the DevTools Intellisense for the Timeslot API
                        // https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools#get-intellisense-for-the-client-side-object
                // Sys.Application.remove_load(pageLoadHandler);  

    Regards, Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top