Templates
The Scheduler component provides different types of templates that allow you to customize the Scheduler's appearance and functionality. The template options can be used to modify event rendering, date and time headers, and other visual elements of the Scheduler.
Template Options
- EventTemplate
- AllDayEventTemplate
- DateHeaderTemplate
- GroupHeaderTemplate
- MajorTimeHeaderTemplate
- MinorTimeHeaderTemplate
- Views Templates
EventTemplate
The following example shows how to use the EventTemplate to customize the Scheduler events:
-
description(the Description of the event) -
end(the End Date of the event) -
resources(the Resources for the event) -
start(the Start Date of the event) -
title(the Title of the event)
The following example shows how to configure the EventTemplate for the Scheduler Component:
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
.Name("scheduler")
.Date(new DateTime(2022, 6, 13))
.StartTime(new DateTime(2022, 6, 13, 7, 00, 00))
.Height(600)
.Views(views =>
{
views.WeekView();
views.MonthView();
})
.Timezone("Etc/UTC")
.Resources(resource =>
{
resource.Add(m => m.OwnerID)
.Title("Owner")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new[] {
new { Text = "Alex", Value = 1 },
new { Text = "Bob", Value = 2 },
new { Text = "Charlie", Value = 3 }
});
})
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.Field(f => f.Title);
m.Field(f => f.Start);
m.Field(f => f.End);
m.Field(f => f.OwnerID);
})
.Read("Basic_Usage_Read", "Scheduler")
)
.EventTemplate(
"<div>" +
"<strong>#= title #</strong><br />" +
"<small>#= kendo.toString(start, 'hh:mm tt') # - #= kendo.toString(end, 'hh:mm tt') #</small><br />" +
"</div>"
)
)
AllDayEventTemplate
The AllDayEventTemplate is used to render the "all day" scheduler events. The following fields are available in the template:
-
description(the Description of the event) -
end(the End Date of the event) -
isAllDay(if set totrue, the event is "all day") -
resources(the Resources for the event) -
start(the Start Date of the event) -
title(the Title of the event)
The following example shows how to configure the AllDayEventTemplate for the Scheduler Component:
.AllDayEventTemplate(
"<div class='all-day-event'>" +
"<strong>#= title #</strong> - All day<br />" +
"</div>"
)
DateHeaderTemplate
The DateHeaderTemplate is used to render the date header cells. By default, the scheduler renders the date using a custom format - "ddd M/dd". The "ddd" specifier represents the abbreviated name of the weekday and will be localized using the current Kendo UI culture.
If you want to control the day and month order, you can define a custom template. The following field is available for use in the template:
-
date(the major tick date)
The following example shows how to configure the DateHeaderTemplate for the Scheduler Component:
.DateHeaderTemplate("<strong>#=kendo.toString(date, 'd')#</strong>")
GroupHeaderTemplate
You can use the GroupHeaderTemplate to modify the rendering of the group headers in the Day, Week, WorkWeek, and Timeline Views. The following fields are available for use in the template:
-
text(the group text) -
color(the group color) -
value(the group value) -
field(the resource field of the Scheduler event which contains the resource id) -
title(the 'title' option of the resource) -
name(the 'name' option of the resource)
The following example shows how to configure the GroupHeaderTemplate of the Scheduler:
.GroupHeaderTemplate("<strong style='color: green'>#=text#</strong>")
MajorTimeHeaderTemplate
The MajorTimeHeaderTemplate allows you to modify the major ticks. By default, the Scheduler renders the time using the current culture time format. The following field is available for use in the template:
-
date(the major tick date)
The following example shows how to configure the MajorTimeHeaderTemplate for the Scheduler Component:
.MajorTimeHeaderTemplate("<strong>#=kendo.toString(date, 'HH:mm')#</strong>")
MinorTimeHeaderTemplate
The MinorTimeHeaderTemplate option specifies how the minor ticks are displayed. By default, the Scheduler renders a . The following field is available for use in the template:
-
date(the major tick date)
The following example shows how to configure the MinorTimeHeaderTemplate for the Scheduler Component:
.MinorTimeHeaderTemplate("<small>#=kendo.toString(date, 'mm')#</small>")
ViewsTemplates
The views displayed by the Scheduler can also use all the Templates listed above.