Extending agenda view to show whole month or above.

[Hans van Rijnswoud]

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,

[Rosen]

Hello Hans,

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

Regards,
Rosen
Telerik

[Hans van Rijnswoud]

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,

[Rosen]

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

[Anupam]

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.

[Rosen]

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

[Anupam]

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.

[Rosen]

Hello Anupam,

 I'm afraid that this is not possible.

Regards,
Rosen
Telerik

[Erik]

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

[Rosen]

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

[Erik]

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

[Rosen]

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

[Erik]

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>
});

[Rosen]

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

[Erik]

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")
   ...

[Rosen]

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

[Shea]

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

[Rosen]

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

 

 

[Nariman]

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
        }
});

[Rosen]

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

 

 

[jantoine]

<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.

[Rosen]

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