Error when going to work hours when in timelineWeek only?

[Sayer]

I have my views for the kendo scheduler set up like so:

views: [

    {type: "day", startTime: new Date(1901, 1, 1, 0, 0, 0), endTime: new Date(1901, 1, 1, 23, 59, 59), workDayStart: new Date(workHoursStart), workDayEnd: new          Date(workHoursEnd)},

    {type: "week", startTime: new Date(1901, 1, 1, 0, 0, 0), endTime: new Date(1901, 1, 1, 23, 59, 59), workDayStart: new                                                                          Date(workHoursStart), workDayEnd: new Date(workHoursEnd), selected: true},

    {type: "workWeek", startTime: new Date(1901, 1, 1, 0, 0, 0), endTime: new Date(1901, 1, 1, 23, 59, 59), workDayStart: new Date(workHoursStart),                            workDayEnd: new Date(workHoursEnd)},{type: "month"},

    {type: "agenda", eventTemplate: $('#agendaEventTemplate').html()},

    {type: AgendaDayView, title: 'Day Agenda', eventTemplate: $('#agendaEventTemplate').html()},

    {type: "timeline", columnWidth: 1, minorTickCount: 1, startTime: new Date(1901, 1, 1, 0, 0, 0), endTime: new Date(1901, 1, 1, 23, 59, 59), workDayStart: new            Date(workHoursStart), workDayEnd: new Date(workHoursEnd), group: {orientation: 'vertical', resources: ['OwnerName']}},

    {type: "timelineWeek", minorTickCount: 1, majorTick: 1440, columnWidth: 1, startTime: new Date(1901, 1, 1, 0, 0, 0), endTime: new Date(1901, 1, 1, 23, 59,              59), workDayStart: new Date(workHoursStart), workDayEnd: new Date(workHoursEnd), group: {orientation: 'vertical', resources: ['OwnerName']}},

    {type: "timelineMonth", startTime: new Date(1901, 1, 1, 0, 0, 0), endTime: new Date(1901, 1, 1, 0, 0, 0), group: {orientation: 'vertical', resources:                                 ['OwnerName']}}],

with no declaration of workDayStart and workDayEnd in the scheduler initialization outside of each view declaration, because timelineMonth and timelineWeek throw an error when switching to show work hours. Doing what I did above and getting rid of setting workDayStart and workDayEnd as an option in the scheduler fixed the timelineMonth error, but the timelineWeek error is still there... I am wondering if anyone knows how I show work hours in the timelineWeek view. Can timelineWeek view even handle show work hours? Or is it not supposed to? (like timelineMonth)

The error I get is: 'Uncaught TypeError: Cannot read property "end" of undefined' when switching to work hours in timelineWeek view.

[Dimitar]

Hello Sayer,

Thank you for the detailed sample code provided.

On the following Dojo example you will find a slightly modified version of the Kendo Scheduler, which allows you to properly switch to Business Hours view in Timeline Week. You will notice that I have changed the configuration for the Timeline Week like so:

{
  type: "timelineWeek",
  minorTickCount: 1,
  majorTick: 1440,
  columnWidth: 1,
  startTime: new Date(1901, 1, 1, 0, 0, 0),
  endTime: new Date(1901, 1, 1, 23, 59, 59),
  workDayStart: new Date("2013/6/6 08:00 AM"),
  workDayEnd: new Date("2013/6/6 08:00 PM"),
  group: {orientation: 'vertical', resources: ['OwnerName']}
}

The error which you are getting should be caused by the fact that the workDayStart and workDayEnd configuration properties are not set properly. I would suggest you to check the values that you are passing to the new Date() constructor for the above fields For more detailed example you can also check this official demo, which has the Timeline For Week view.

Regards,
Dimitar
Telerik by Progress

[Sayer]

Thank you for the response. I double checked what workHoursStart and workHoursEnd are, and made my timelineWeek view like this:

{type: "timelineWeek", minorTickCount: 1, majorTick: 1440, columnWidth: 1, startTime: new Date(1901, 1, 1, 0, 0, 0), endTime: new Date(1901, 1, 1, 23, 59, 59), workDayStart: new Date(workHoursStart), workDayEnd: new Date(workHoursEnd), group: {orientation: 'vertical', resources: ['AttendeeName']}, selected: selectTimelineWeek}

and workHoursStart prints to console.log like: 2013/6/6 08:30 AM 

and workHoursEnd prints to console.log like: 2013/6/6 04:00 PM

And these are set for the workDayStart and workDayEnd for day, week, workWeek, and timeline view and they work just fine. I am just not quite getting what the issue with timelineWeek is... my workHoursStart and workHoursEnd should be correctly formatted. 

[Sayer]

It says the error is at kendo.all.js line 81483, for the following function: where the error is at 'var end = start' 

timeSlotRanges: function (startTime, endTime) {
                var collections = this._timeSlotCollections;
                var start = this._startSlot(startTime, collections);
                if (!start.inRange && startTime >= start.slot.end) {
                    start = null;
                }
                var end = start; //Error here!
                if (startTime < endTime) {
                    end = this._endSlot(endTime, collections);
                }
                if (end && !end.inRange && endTime <= end.slot.start) {
                    end = null;
                }
                if (start === null && end === null) {
                    return [];
                }
                if (start === null) {
                    start = {
                        inRange: true,
                        slot: collections[end.slot.collectionIndex].first()
                    };
                }
                if (end === null) {
                    end = {
                        inRange: true,
                        slot: collections[start.slot.collectionIndex].last()
                    };
                }
                return this._continuousRange(TimeSlotRange, collections, start, end);
            },

[Dimitar]

Hello Sayer,

I am afraid I am not quite sure about the exact issue that you are experiencing at your end.

May I ask you to modify the previously sent Scheduler setup or create a new isolated example in our Dojo sandbox to illustrate the behavior that you are receiving on your end? This way I will be able to provide you with the most appropriate assistance for your case.

Regards,
Dimitar
Telerik by Progress

[Sayer]

This modified Dojo has the same problem. All I did was change the start and end times of the work day to variables, that were set with a string that should be correctly formatted. All other views but timelineWeek work. It seems when a string is explicitly created in the new Date() for the work day times, it is fine... but having a variable it is not, but only timelineWeek is bad. I need it to take a variable because I have to get the start time from my database, so I won't actually know the start time of the work day or end time until the page is loaded.

[Dimitar]

Hello Sayer,

Thank you for the modified demo provided.

I have managed to pin down the problem. On the following Dojo you will find a slightly modified version, in which the only change is the majorTick property. The problem comes from the time slot that you want to show. To make it work correctly you need to make an additional computation in your timeSlotRanges function.

What you have to do is calculate the exact time slot needed to properly display the events by the following formula: (endTime hours - startTime hours)  * 60. For the current example this will give you 450 and if you change the current majorTick everything will work correctly.

Note, that when you set the majorTick property to a value different than 1440 (24 hours in minutes), this will render multiple slots for each day in the Full day view. Therefore, you may want to dynamically change the majorTick value, according to the Business hours / Full day selection. To alter that Scheduler configuration you will have to recreate the widget when needed. For example, you can attach a click handler to the Show Business Hours button and then follow the steps in this article to destroy the widget and afterwards initialize the widget with the new options.

I hope this helps.

Regards,
Dimitar
Telerik by Progress

[Sayer]

Thanks a lot for the answer. Quite a simple issue, but I had no idea that the majorTick was throwing errors since it only happened in timelineWeek. I do already have my own custom button to handle changing to work hours and to full day and just setting the major tick hours in that button call back did the trick. I luckily didn't have to destroy and recreate the scheduler again for the work hours (I already am doing that when filtering more people in the timeline views).