Views

The Scheduler supports different views to display its events.

Default Views

The ASP.NET Core Scheduler provides the following built-in views:

• day—Displays the events in a single day.
• week—Displays the events in a whole week.
• workWeek—Displays the events in a work week.
• month—Displays the events in a single month.
• year—Displays the events in a twelve months period.
• agenda—Displays the events from the current date until the next week (seven days).
• timeline—Displays the events for the day in line.
• timelineWeek—Displays the events in a whole week in line.
• timelineWorkWeek—Displays the events in a work week in line.
• timelineMonth—Displays the events for a month in line.

By default, the Day and Week views are enabled. To enable other views or configure them, use the .Views() option.

The built-in Scheduler views are designed to render a time-frame that ends on the day it starts. To render views which start on one day and end on another, build a custom view.

The following example demonstrates how to enable all Scheduler views.

    @(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
        .Name("scheduler")
        .Date(new DateTime(2021, 6, 13))
        .StartTime(new DateTime(2021, 6, 13, 7, 00, 00))
        .Height(600)
        .Views(views =>
        {
            views.DayView();
            views.WorkWeekView(workWeekView => workWeekView.Selected(true));
            views.WeekView();
            views.MonthView();
            views.YearView();
            views.AgendaView();
            views.TimelineView();
            views.TimelineWeekView();
            views.TimelineWorkWeekView();
            views.TimelineMonthView();
        })
        .Timezone("Etc/UTC")
        .Resources(resource =>
        {
            resource.Add(m => m.OwnerID)
                .Title("Owner")
                .DataTextField("Text")
                .DataValueField("Value")
                .DataColorField("Color")
                .BindTo(new[] {
                    new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
                    new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
                    new { Text = "Charlie", Value = 3, Color = "#56ca85" }
                });
        })
        .DataSource(d => d
            .Model(m => {
                m.Id(f => f.TaskID);
                m.Field(f => f.Title).DefaultValue("No title");
                m.Field(f => f.OwnerID).DefaultValue(1);
                m.RecurrenceId(f => f.RecurrenceID);
            })
            .Read("Basic_Usage_Read", "Scheduler")
            .Create("Basic_Usage_Create", "Scheduler")
            .Destroy("Basic_Usage_Destroy", "Scheduler")
            .Update("Basic_Usage_Update", "Scheduler")
            .Filter(filters =>
            {
                filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
            })
        )
    )

        @{
            var resources = new[] {
                new { Text = "Alex", Value = 1, Color = "#f8a398" },
                new { Text = "Bob", Value = 2, Color = "#51a0ed" },
                new { Text = "Charlie", Value = 3, Color = "#56ca85" }
            };

            string defaultTitle = "No Title";
        }
        <kendo-scheduler name="scheduler" 
            date="new DateTime(2021, 6, 13)" 
            start-time="new DateTime(2021, 6, 13, 7, 00, 00)"
            timezone="Etc/UTC"
            height="600">
            <views>
                <view type="day"></view>
                <view type="workWeek" selected="true"></view>
                <view type="week"></view>
                <view type="month"></view>
                <view type="year"></view>
                <view type="agenda"></view>
                <view type="timeline"></view>
                <view type="timelineWeek"></view>
                <view type="timelineWorkWeek"></view>
                <view type="timelineMonth"></view>
            </views>
            <resources>
                <resource field="OwnerID" title="Owner" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@resources"></resource>
            </resources>
            <scheduler-datasource type="@DataSourceTagHelperType.Ajax">
                <transport>
                    <read url="@Url.Action("Basic_Usage_Read", "Scheduler")" />
                    <create url="@Url.Action("Basic_Usage_Create", "Scheduler")" />
                    <destroy url="@Url.Action("Basic_Usage_Destroy", "Scheduler")" />
                    <update url="@Url.Action("Basic_Usage_Update", "Scheduler")" />
                </transport>
                <filters>
                    <datasource-filter logic="or">
                        <filters>
                            <datasource-filter field="OwnerID" operator="eq" value="1"></datasource-filter>
                            <datasource-filter field="OwnerID" operator="eq" value="2"></datasource-filter>
                        </filters>
                    </datasource-filter>
                </filters>
                <schema data="Data" total="Total" errors="Errors">
                    <scheduler-model id="TaskID">
                        <fields>
                            <field name="TaskID" type="number"></field>
                            <field name="title" from="Title" type="string" default-value="@defaultTitle"></field>
                            <field name="start" from="Start" type="date"></field>
                            <field name="end" from="End" type="date"></field>
                            <field name="description" from="Description" type="string"></field>
                            <field name="recurrenceId" from="RecurrenceID" type="number" default-value=null></field>
                            <field name="recurrenceRule" from="RecurrenceRule" type="string" ></field>
                            <field name="recurrenceException" from="RecurrenceException" type="string"></field>
                            <field name="startTimezone" from="StartTimezone" type="string"></field>
                            <field name="endTimezone" from="EndTimezone" type="string"></field>
                            <field name="OwnerID" type="number" default-value="1"></field>
                            <field name="isAllDay" from="IsAllDay" type="boolean"></field>
                        </fields>
                    </scheduler-model>
                </schema>
            </scheduler-datasource>
        </kendo-scheduler>

Custom Views

The Scheduler enables you to create custom views which meet the specific project requirements by extending the default View classes of the Scheduler. To implement a custom view, extend (inherit from) one of the existing views.

The following source-code files contain the views implementation:

• kendo.scheduler.view.js—Contains the basic logic of the Scheduler views. Each of the other predefined views extends the kendo.ui.SchedulerView class.
• kendo.scheduler.dayview.js—Contains the logic which implements the MultiDayView. The MultiDayView class is further extended to create the DayView, the WeekView, and the WorkWeekView.
• kendo.scheduler.monthview.js—Contains the implementation of the MonthView which extends the SchedulerView.
• kendo.scheduler.yearview.js—Contains the implementation of the YearView which extends the SchedulerView.
• kendo.scheduler.timelineview.js—Implements the TimelineView, the TimelineWeekView, the TimelineWorkWeekView, and the TimelineMonthView. The TimelineWeekView, the TimelineWorkWeekView, and the TimelineMonthView extend the TimelineView class.
• kendo.scheduler.agendaview.js—Implements the AgendaView which extends the SchedulerView.

You can override each method and property that are defined in the list by extending the respective class. In this way, the functionality and the appearance of the view will be altered by creating the new, custom view. For more information, refer to the kendo.scheduler.dayview.js and kendo.scheduler.timelineview.js files which contain definitions of views which extend the already defined MultiDayView and TimelineView views.

See Also

• Server-Side API

  Implementing Custom Views UI for ASP.NET MVC