This is a migrated thread and some comments may be shown as answers.

Dynamically changed number of days shown in Kendo UI Scheduler

8 Answers 80 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Lilan
Top achievements
Rank 2
Lilan asked on 23 Jul 2015, 09:29 AM

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

8 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 27 Jul 2015, 08:10 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Lilan
Top achievements
Rank 2
answered on 27 Jul 2015, 09:25 AM

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

0
Accepted
Rosen
Telerik team
answered on 28 Jul 2015, 08:17 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Lilan
Top achievements
Rank 2
answered on 18 Aug 2015, 05:44 AM

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

 

0
Rosen
Telerik team
answered on 18 Aug 2015, 03:03 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Lilan
Top achievements
Rank 2
answered on 19 Aug 2015, 05:26 AM

Hello Rosen, 

 Thanks Rosen, really appreciate your support.

Regards, 

Lilan

0
Lilan
Top achievements
Rank 2
answered on 19 Aug 2015, 06:25 AM

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

0
Rosen
Telerik team
answered on 19 Aug 2015, 12:01 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Lilan
Top achievements
Rank 2
Answers by
Rosen
Telerik team
Lilan
Top achievements
Rank 2
Share this question
or