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

Extending agenda view to show whole month or above.

21 Answers 905 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Hans van Rijnswoud
Top achievements
Rank 2
Hans van Rijnswoud asked on 20 Aug 2013, 08:35 AM
Hi,

I very like agenda view of new scheduler, but now it has limited functionality.
Is it possible to show events not only for the one week but, for example, one month or 3 month? So user will see all events for the next one-three month but not only for the next week.

Is there any configuration that will allow to do this?

Regards,

21 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 22 Aug 2013, 06:44 AM
Hello Hans,

I'm afraid that currently changing the time range displayed is not supported without overriding the Agenda View.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Hans van Rijnswoud
Top achievements
Rank 2
answered on 22 Aug 2013, 01:11 PM
Hi Rosen,

What's means override? It's means that I should change sources of Scheduler component, or is it means that there is some solution to change view of agenda? In documentation I only see possibilities to change event view but not view of the viewport itself.

Please explain a little bit completely how is it possible.

Regards,
0
Accepted
Rosen
Telerik team
answered on 22 Aug 2013, 03:50 PM
Hi Hans,

Please accept my apologies for not providing more in-depth info in my previous answer.

What I meant was that a custom view which extends the Agenda should be created. This view should override the endDate method of the built-in view in order to extend the displayed period. Here you can find a simple test page which demonstrates such approach.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anupam
Top achievements
Rank 1
answered on 18 Sep 2013, 07:52 AM
Two questions:

Can you show similar example where we can extend the week view (just like the example was extending agenda view)?

Also what are the fields/members we can override? e.g. In agenda view it overrode endDate but when I tried overwriting startDate it gave an error. So how do I know which fields I can override when I extend the view.
0
Rosen
Telerik team
answered on 19 Sep 2013, 07:24 AM
Hello Anupam,

Overriding Week view start or end date will not work as expected, due to the fact that this view is far more complex and the logic which dates to render are not determined by the start/end dates. Actually it is the opposite way the start and end dates are set by the logic responsible for rendering the view. However, you could show more days by extending the MultiDayView base class as shown here. Note that currently only sequential dates are supported. 

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anupam
Top achievements
Rank 1
answered on 19 Sep 2013, 08:12 AM
Hey Rosen,

Related question: Is there a way to completely hide hours in the weekly view i.e. show only all day row?

We tried playing with the majorTick parameter but could not remove all the hours only some of them.

Thanks.
0
Rosen
Telerik team
answered on 20 Sep 2013, 07:08 AM
Hello Anupam,

 I'm afraid that this is not possible.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Erik
Top achievements
Rank 1
answered on 03 Oct 2013, 12:41 PM
Hi Rosen,

Is it possible when clicking on the left upper buttons that the custom agenda view also skips to the next month? Now it only changes + or - 1 day.

Do you also have an example of setting this up in the razor equivalent? (at least the part where to set the type to "CustomAgenda")

Best regards,
Erik
0
Rosen
Telerik team
answered on 04 Oct 2013, 06:27 AM
Hello Erik,

You could control to which date agenda view is navigated by overriding its nextDate and previousDate methods. For example:

var CustomAgenda = kendo.ui.AgendaView.extend({   
  nextDate: function() {
    var startDate = this.startDate();   
    return new Date(startDate.setMonth(startDate.getMonth() + 1));
  },
  previousDate: function() {
    var endDate = this.endDate();
    return new Date(endDate.setMonth(endDate.getMonth() - 1));       
  }
});

I'm afraid that currently setting custom views is not possible when configuring the widget via the ASP.NET MVC wrappers.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Erik
Top achievements
Rank 1
answered on 04 Oct 2013, 09:00 AM
Thanks for the reply Rosen!

Is it possible to "mix" the js for configuring this part and still using the MVC wrappers?
I already am using the razor parts throughout my project ;-)

- Erik
0
Rosen
Telerik team
answered on 07 Oct 2013, 06:25 AM
Hello Erik,

I'm not sure what you meant by mixing the js configuration. You can have scheduler configured via JavaScript side-by-side with one configured via the wrapper if this is what you are asking for. Also you may extend all of the scheduler instances on a given page by setting the custom view via the Scheduler prototype:

<script>
    var MySchedulerView = kendo.ui.DayView.extend({
        name: "customView"
    });
 
    kendo.ui.Scheduler.fn.options.views = [{ type: "MySchedulerView", title: "My View" }];
</script>
 
@(Html.Kendo().Scheduler<TaskViewModel>()
    .Name("scheduler")
    //.....
)

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Erik
Top achievements
Rank 1
answered on 07 Oct 2013, 03:21 PM
Yes that was what I meant with "mixing" ;-)
I have tried this with the previous example you gave me about setting the nextDate and previousDate but this does not seem to work.

So my razor part looks like this:
@(Html.Kendo().Scheduler<Gusto.Web.Models.Scheduler.TaskViewModel>()
   .Name("scheduler")
   ...
And then I inserted that js from your example in the header:
<script type="text/javascript">
var CustomAgenda = kendo.ui.AgendaView.extend({  
  nextDate: function() {
    var startDate = this.startDate();  
    return new Date(startDate.setMonth(startDate.getMonth() + 1));
  },
  previousDate: function() {
    var endDate = this.endDate();
    return new Date(endDate.setMonth(endDate.getMonth() - 1));      
  }
</script>
});
0
Rosen
Telerik team
answered on 08 Oct 2013, 06:10 AM
Hi Erik,

You should make sure that the Custom view type is defined and added to the Scheduler prototype before the initialization of the widget, as shown in the snippet I have provided.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Erik
Top achievements
Rank 1
answered on 10 Oct 2013, 08:45 PM
Still not working for me. Tried to put that init js part everywhere so I guess something else is wrong.
This is what I have (in that exact order):

<script type="text/javascript">
    var CustomAgenda = kendo.ui.AgendaView.extend({
        nextDate: function () {
            var startDate = this.startDate();
            return new Date(startDate.setMonth(startDate.getMonth() + 1));
        },
        previousDate: function () {
            var endDate = this.endDate();
            return new Date(endDate.setMonth(endDate.getMonth() - 1));
        },
        endDate: function () {
            var date = kendo.ui.AgendaView.fn.endDate.call(this);
            return kendo.date.addDays(date, 31);
        },
        calculateDateRange: function () {
            //create a range of dates to be shown within the view
 
            var selectedDate = this.options.date,
                start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                idx, length,
                dates = [];
 
            for (idx = 0, length = 11; idx < length; idx++) {
                dates.push(start);
                start = kendo.date.nextDay(start);
            }
 
            this._render(dates);
        }
    });
 
</script>
 
@(Html.Kendo().Scheduler<Gusto.Web.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
   ...
0
Rosen
Telerik team
answered on 11 Oct 2013, 07:31 AM
Erik,

Obviously you are missing the part where the view is added to the Scheduler widget prototype. This is shown in my original post on the matter:

kendo.ui.Scheduler.fn.options.views = [{ type: "MySchedulerView", title: "My View" }]

On a side note as the topic diverge from the thread's original question I would like to ask you to open a new one if additional  questions arise.Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shea
Top achievements
Rank 1
answered on 14 Sep 2014, 04:34 PM
I can't quite get the syntax for this use typescript. What would the syntax for extending, and overriding endDate in the AgendaView be when using TypeScript?

Thanks,
~S
0
Rosen
Telerik team
answered on 16 Sep 2014, 08:37 AM
Hi Shea,

Being an internal class the AgendaView definition is not available as TypeScript definition. Therefore, you will need to add this definition yourself in order to extend it. Then you will be able to extend it and provide the custom implementation:

//add to kendo.all.d.ts
 
class AgendaView implements SchedulerView {
    endDate(): Date
}

// custom agenda view implementation
 
module kendo.ui {
    export class CustomAgenda extends kendo.ui.AgendaView {
        endDate(): Date {
            var date = new Date(super.endDate().getTime());
            date.setTime(date.getTime() + 31 * 86400000);
            return date;
        }
    }
 
}

$("#scheduler").kendoScheduler({
    views: [
         /*..*/
        // "agenda",
        { type: kendo.ui.CustomAgenda, title: "Custom Agenda" }
    ],
    /*..*/    
});


Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nariman
Top achievements
Rank 1
answered on 19 Aug 2015, 05:08 PM
How can i change the startDate and endDate for AgendaView upon rebind of the scheduler? The below function only work when the scheduler is first loaded and not in rebind event. Please kindly advise on the solution

var CustomAgenda = kendo.ui.AgendaView.extend({
        endDate: function () {
            var date = kendo.ui.AgendaView.fn.endDate.call(this);
            return kendo.date.addDays(date, -7); // take the date and minus 7 days
        }
});
0
Rosen
Telerik team
answered on 21 Aug 2015, 06:35 AM

Hello Nariman,

I'm not sure I understood your question, nor what you are trying to achieve. Could you please clarify, a small test page which demonstrates the issue will be appreciated.

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
jantoine
Top achievements
Rank 1
answered on 01 Sep 2015, 02:40 PM
<script>
    var MySchedulerView = kendo.ui.DayView.extend({
        name: "customView"
    });
  
    kendo.ui.Scheduler.fn.options.views = [{ type: "MySchedulerView", title: "My View" }];
</script>

 

I tried the code above And the title and name of the view is always "MySchedulerView" instead of what is specified.

What am I doing wrong?

Thanks.

0
Rosen
Telerik team
answered on 02 Sep 2015, 08:47 AM

Hello jantoine,

I'm not able to observe such issue locally. Please take a look at the attached screenshot.

Also as your question is not related to the thread's initial topic I would ask you to open a separate support request in which to provide all of the required information in order to recreate the issue locally.

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Hans van Rijnswoud
Top achievements
Rank 2
Answers by
Rosen
Telerik team
Hans van Rijnswoud
Top achievements
Rank 2
Anupam
Top achievements
Rank 1
Erik
Top achievements
Rank 1
Shea
Top achievements
Rank 1
Nariman
Top achievements
Rank 1
jantoine
Top achievements
Rank 1
Share this question
or