Implementing Custom Views for Scheduler

Environment

Product	Telerik UI for ASP.NET Core Scheduler
Product Version	Created with version 2024.4.1112

Description

How can I create a custom view for the ASP.NET Core Scheduler component?

Solution

By design, the Scheduler provides a variety of built-in views. For more information on the default views, refer to the Scheduler Views documentation.

To create a custom Agenda view that shows the events for one month (31 days), follow the steps below.

1. Define the custom view within the Views() configuration by specifying its name and title.

           @(Html.Kendo().Scheduler<MeetingViewModel>()
               .Name("scheduler")
               .Views(views => {
                   views.DayView();
                   views.WeekView();
                   views.MonthView();
                   views.AgendaView();
                   views.CustomView("CustomAgenda", view => view.Title("Custom Agenda").Selected(true));
               })
               ...// Additional configuration.
           )
   

       @addTagHelper *, Kendo.Mvc
   
       <kendo-scheduler name="scheduler">
           <views>
               <view type="day"></view>
               <view type="week"></view>
               <view type="month"></view>
               <view type="agenda"></view>
               <view type="CustomAgenda" title="Custom Agenda" selected="true"></view>
           </views>
           <!-- Other configuration -->
       </kendo-scheduler>
   

2. Include the following JavaScript logic before the Scheduler declaration that extends the built-in Agenda view by adding 31 days to its default end date. The name of the JavaScript variable must match the type of the custom view in the Scheduler declaration (for example, CustomAgenda).

       <script>
           var CustomAgenda = kendo.ui.AgendaView.extend({
               endDate: function () {
                   var date = kendo.ui.AgendaView.fn.endDate.call(this);
                   return kendo.date.addDays(date, 31);
               }
           });
       </script>
   

For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository on how to implement a custom view for the Scheduler. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.

More ASP.NET Core Scheduler Resources

• ASP.NET Core Scheduler Documentation

• ASP.NET Core Scheduler Demos

• ASP.NET Core Scheduler Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Scheduler for ASP.NET Core

• Server-Side API Reference of the Scheduler for ASP.NET Core

• Server-Side TagHelper API Reference of the Scheduler for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base