Dynamically changed number of days shown in Kendo UI Scheduler

[Lilan]

Hello, 

 I have requirement that we should be able to give uses to select number of days to be shown in the scheduler and scheduler should be changed accordingly. Please check the structure of the week scheduler from this.

Requirement:

Ex:

1. Select 6 , scheduler should show only 6 days 

2. Select 8,  scheduler should show only 8 days 

 Any Idea?

 

Thanks, 

Lilan

[Rosen]

Hello Lilan,

Although, this is not supported out-of-the-box you can achieve this by implementing a custom view (which to extend the TimelineView) and control the rendering of the the slots. Here you can find a test page which demonstrates a possible implementation.

Regards,
Rosen
Telerik

 

 

[Lilan]

Hello Rosen , 

Your example was fantastic. However I tried to apply it to sample application here which was not succeeded. Could you suggest what I have done wrong?

Thanks,

Lilan

[Rosen]

Hello Lilan,

 

In order type to be resolved, the custom view declaration should be outside of the controller. Also you should update the scheduler selector used in the select's change event. Here is updated version of the test page.

 

Regards,
Rosen
Telerik

 

 

[Lilan]

Hello Rosen , 

 Thanks a lot for your sample and it is really helpful. But I have one question for you. I want to hide times from this sample implementation of yours scheduler. I tried, but no luck.... Please help....!!!

 

Regards, 

Lilan

 

[Rosen]

Hello Lilan,

If you are referring to the the custom code in the Scheduler's dataBound event. It will not the executed as there is a check for the name of the view, which is not timeline anymore, but it is called MyCustomTimelistView. Thus, the check should be changed accordingly. Also I have noticed that there a multiple dataBound event handler assign via the Scheduler declaration. Note that this will not work, there can be only single handler per event, when attaching it via the widget's declaration.

Regards,
Rosen
Telerik

 

 

[Lilan]

Hello Rosen, 

 Thanks Rosen, really appreciate your support.

Regards, 

Lilan

[Lilan]

Hello Rosen, 

 Again one thing that I am experiencing navigation buttons did not work even in sample project . please check application from here. 

 

Regards,

Lilan

[Rosen]

Hello Lilan,

As the custom view is displaying a portion of week in which the selected date is located, the next button will not work by default. When it is displaying a 6 days, for example, by default the view endDate will be the same week, thus pressing the next button (which same as selecting the endDate plus one day) will be in the same week and the view will display the same days as before. You could address this by changing the calculateDateRange method to instead stating on the current week in which the selected date is, to just show the next n-days from the selected date. Similar to the following:

calculateDateRange: function() {
     //create the required number of days

     var start = this.options.date,
       //  start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
         idx, length,
         dates = [];

     for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {
       dates.push(start);
       start = kendo.date.nextDay(start);
     }
     this._render(dates);
   }

Note that in the test page, inside the navigate event a non existing function is used which is throwing an JavaScript error.

 

Regards,
Rosen
Telerik