Changing BusinessHours dynamically lead to an error in the timelineMonth View

[K.Ramadan]

Hello,

 

I'm trying to change the time dynamically for each day and each employee individual.

I've achieved that for all Views except the timlineMonth!

So every time I change the business hours dynamically, then the timelineMonth View does not work and one of these errors appear in the chrome devtools

kendo.all.js:113735 Uncaught TypeError: Cannot read property 'children' of undefined

OR

Uncaught TypeError: Cannot read property 'end' of undefined

 

I took the first Dojo example from you :

https://www.telerik.com/forums/how-to-set-business-hours-day-wise#6omvyHlQFkWOQVe1OTWdnw

 

and edited it to reproduce the issue:

https://dojo.telerik.com/aqekoJAG

 

steps to reproduce the issue:

1- change the time from the droplist (select) above the scheduler

2- change the view to timelineMonth

3- open debugger (e.g. devtools console) to see one of the error that I mentioned above 

 

 Thanks in advance

 

K.Ramadan

[Aleksandar]

Hello,

The reason for the observed error is that the showWorkHours configuration is only available with the "day" and "week" views, as documented here https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/showworkhours. In order to change the startTime and endTime of the "timelineMonth" view, however, the Scheduler will need to be destroyed and reinitialized again, as explained in this forum thread:

https://www.telerik.com/forums/kendo-scheduler-change-start-time-when-the-date-changes-in-navigation-bar#bgw1-SQYWEKaqwSPx8xtIQ

Based on the above I have modified the provided example, by adding a check if the current view is a "timelineMonth" view and if so the Scheduler is destroyed and re-created with the required configuration:

        if(scheduler.viewName() === "timelineMonth"){
          var options = scheduler.options;

          scheduler.destroy();
          options.showWorkHours = false;

          options.views = [
            "day",
            "week",
            "timelineWeek",
            "month",
            { type: "timelineMonth", selected: true, startTime:start,endTime:end  },
            "agenda"
          ];
          $("#scheduler").empty().kendoScheduler(options);


        } else {
          //set the scheduler options
          scheduler.options.workDayStart = start;
          scheduler.options.workDayEnd = end;
          //update the view by re-selecting it
          scheduler.view(scheduler.view().name);
        }

Here is a runnable example of the above. I hope this helps.

Regards,
Aleksandar
Progress Telerik