Skip to content

Commit bfb22c6

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 372154a commit bfb22c6

File tree

2 files changed

+285
-0
lines changed

2 files changed

+285
-0
lines changed

‎docs-aspnet/html-helpers/scheduling/scheduler/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ The following example demonstrates the basic configuration of the Scheduler.
288288
* [Adaptive Rendering]({% slug htmlhelpers_scheduler_adaptiverendering_aspnetcore %})—The Scheduler supports adaptive enhancements, such as changes in styling and behavior in order to improve the user experience on different devices.
289289
* [Resources]({% slug htmlhelpers_scheduler_resources_aspnetcore %})—You can assign resources to the Scheduler events.
290290
* [Timezones]({% slug htmlhelpers_scheduler_timezones_aspnetcore %})—For global scheduling, you can set a timezone to the Scheduler. Then users from different time zones will see the correct event start and end times for their time zone.
291+
* [Templates]({% slug scheduler_templates %})—You can use different templates to modify event rendering, date and time headers, and other visual elements of the Scheduler.
291292

292293
## Next Steps
293294

‎docs-aspnet/html-helpers/scheduling/scheduler/templates.md‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
---
2+
title: Templates
3+
page_title: Templates
4+
description: "Learn how to use templates to customize the appearance of the Telerik UI for {{ site.framework }} Scheduler component."
5+
slug: scheduler_templates
6+
position: 8
7+
---
8+
9+
# Templates
10+
11+
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.
12+
13+
## Template Options
14+
15+
* [EventTemplate](#eventtemplate)
16+
* [AllDayEventTemplate](#alldayeventtemplate)
17+
* [DateHeaderTemplate](#dateheadertemplate)
18+
* [GroupHeaderTemplate](#groupheadertemplate)
19+
* [MajorTimeHeaderTemplate](#majortimeheadertemplate)
20+
* [MinorTimeHeaderTemplate](#minortimeheadertemplate)
21+
* [Views Templates](#viewstemplates)
22+
23+
---
24+
25+
## EventTemplate
26+
27+
The following example shows how to use the `EventTemplate` to customize the Scheduler events:
28+
29+
- `description` (the Description of the event)
30+
- `end` (the End Date of the event)
31+
- `resources` (the Resources for the event)
32+
- `start` (the Start Date of the event)
33+
- `title` (the Title of the event)
34+
35+
The following example shows how to configure the `EventTemplate` for the Scheduler Component:
36+
37+
```HtmlHelper
38+
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
39+
.Name("scheduler")
40+
.Date(new DateTime(2022, 6, 13))
41+
.StartTime(new DateTime(2022, 6, 13, 7, 00, 00))
42+
.Height(600)
43+
.Views(views =>
44+
{
45+
views.WeekView();
46+
views.MonthView();
47+
})
48+
.Timezone("Etc/UTC")
49+
.Resources(resource =>
50+
{
51+
resource.Add(m => m.OwnerID)
52+
.Title("Owner")
53+
.DataTextField("Text")
54+
.DataValueField("Value")
55+
.BindTo(new[] {
56+
new { Text = "Alex", Value = 1 },
57+
new { Text = "Bob", Value = 2 },
58+
new { Text = "Charlie", Value = 3 }
59+
});
60+
})
61+
.DataSource(d => d
62+
.Model(m =>
63+
{
64+
m.Id(f => f.TaskID);
65+
m.Field(f => f.Title);
66+
m.Field(f => f.Start);
67+
m.Field(f => f.End);
68+
m.Field(f => f.OwnerID);
69+
})
70+
.Read("Basic_Usage_Read", "Scheduler")
71+
)
72+
.EventTemplate(
73+
"<div>" +
74+
"<strong>#= title #</strong><br />" +
75+
"<small>#= kendo.toString(start, 'hh:mm tt') # - #= kendo.toString(end, 'hh:mm tt') #</small><br />" +
76+
"</div>"
77+
)
78+
)
79+
```
80+
{% if site.core %}
81+
```TagHelper
82+
@addTagHelper *, Kendo.Mvc
83+
@using Kendo.Mvc.UI
84+
85+
@{
86+
var resources = new[]
87+
{
88+
new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
89+
new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
90+
new { Text = "Charlie", Value = 3, Color = "#56ca85" }
91+
};
92+
93+
string defaultTitle = "No Title";
94+
}
95+
96+
<kendo-scheduler name="scheduler"
97+
date="new DateTime(2022, 6, 13)"
98+
start-time="new DateTime(2022, 6, 13, 7, 00, 00)"
99+
height="600"
100+
timezone="Etc/UTC"
101+
event-template="<div><strong>#= title #</strong><br /><small>#= kendo.toString(start, 'hh:mm tt') # - #= kendo.toString(end, 'hh:mm tt') #</small><br /></div>">
102+
<views>
103+
<view type="day"></view>
104+
<view type="workWeek" selected="true"></view>
105+
<view type="week"></view>
106+
<view type="month"></view>
107+
<view type="year"></view>
108+
<view type="agenda"></view>
109+
<view type="timeline"></view>
110+
</views>
111+
<resources>
112+
<resource field="OwnerID" title="Owner" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@resources">
113+
</resource>
114+
</resources>
115+
<scheduler-datasource type="@DataSourceTagHelperType.Ajax">
116+
<transport>
117+
<read url="@Url.Action("Read", "Scheduler")" />
118+
<create url="@Url.Action("Create", "Scheduler")" />
119+
<destroy url="@Url.Action("Destroy", "Scheduler")" />
120+
<update url="@Url.Action("Update", "Scheduler")" />
121+
</transport>
122+
<schema data="Data" total="Total">
123+
<scheduler-model id="TaskID">
124+
<fields>
125+
<field name="TaskID" type="number"></field>
126+
<field name="title" from="Title" type="string" default-value="@defaultTitle"></field>
127+
<field name="start" from="Start" type="date"></field>
128+
<field name="end" from="End" type="date"></field>
129+
<field name="description" from="Description" type="string"></field>
130+
<field name="OwnerID" type="number" default-value="1"></field>
131+
</fields>
132+
</scheduler-model>
133+
</schema>
134+
</scheduler-datasource>
135+
</kendo-scheduler>
136+
```
137+
{% endif %}
138+
139+
## AllDayEventTemplate
140+
141+
The `AllDayEventTemplate` is used to render the "all day" scheduler events. The following fields are available in the template:
142+
143+
- `description` (the Description of the event)
144+
- `end` (the End Date of the event)
145+
- `isAllDay` (if set to `true`, the event is "all day")
146+
- `resources` (the Resources for the event)
147+
- `start` (the Start Date of the event)
148+
- `title` (the Title of the event)
149+
150+
The following example shows how to configure the `AllDayEventTemplate` for the Scheduler Component:
151+
152+
```HtmlHelper
153+
.AllDayEventTemplate(
154+
"<div class='all-day-event'>" +
155+
"<strong>#= title #</strong> - All day<br />" +
156+
"</div>"
157+
)
158+
```
159+
{% if site.core %}
160+
```TagHelper
161+
<kendo-scheduler name="scheduler"
162+
date="new DateTime(2022, 6, 13)"
163+
start-time="new DateTime(2022, 6, 13, 7, 00, 00)"
164+
height="600"
165+
timezone="Etc/UTC"
166+
all-day-event-template="<div><strong> All Day Template for #= title #</strong><br /></div>">
167+
</kendo-scheduler>
168+
```
169+
{% endif %}
170+
171+
## DateHeaderTemplate
172+
173+
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.
174+
175+
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:
176+
177+
- `date` (the major tick date)
178+
179+
The following example shows how to configure the `DateHeaderTemplate` for the Scheduler Component:
180+
181+
```HtmlHelper
182+
.DateHeaderTemplate("<strong>#=kendo.toString(date, 'd')#</strong>")
183+
```
184+
{% if site.core %}
185+
```TagHelper
186+
<kendo-scheduler name="scheduler"
187+
date="new DateTime(2022, 6, 13)"
188+
start-time="new DateTime(2022, 6, 13, 7, 00, 00)"
189+
height="600"
190+
timezone="Etc/UTC"
191+
date-header-template="<strong>#= kendo.toString(date, 'd') #</strong>">
192+
</kendo-scheduler>
193+
```
194+
{% endif %}
195+
196+
## GroupHeaderTemplate
197+
198+
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:
199+
200+
- `text` (the group text)
201+
- `color` (the group color)
202+
- `value` (the group value)
203+
- `field` (the resource field of the Scheduler event which contains the resource id)
204+
- `title` (the 'title' option of the resource)
205+
- `name` (the 'name' option of the resource)
206+
207+
The following example shows how to configure the `GroupHeaderTemplate` of the Scheduler:
208+
209+
```HtmlHelper
210+
.GroupHeaderTemplate("<strong style='color: green'>#=text#</strong>")
211+
212+
```
213+
{% if site.core %}
214+
```TagHelper
215+
<kendo-scheduler name="scheduler"
216+
date="new DateTime(2022, 6, 13)"
217+
start-time="new DateTime(2022, 6, 13, 7, 00, 00)"
218+
height="600"
219+
timezone="Etc/UTC"
220+
group-header-template="<strong style='color: green'>#=text#</strong>">
221+
</kendo-scheduler>
222+
223+
```
224+
{% endif %}
225+
226+
## MajorTimeHeaderTemplate
227+
228+
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:
229+
230+
- `date` (the major tick date)
231+
232+
The following example shows how to configure the `MajorTimeHeaderTemplate` for the Scheduler Component:
233+
234+
```HtmlHelper
235+
.MajorTimeHeaderTemplate("<strong>#=kendo.toString(date, 'HH:mm')#</strong>")
236+
```
237+
{% if site.core %}
238+
```TagHelper
239+
<kendo-scheduler name="scheduler"
240+
date="new DateTime(2022, 6, 13)"
241+
start-time="new DateTime(2022, 6, 13, 7, 00, 00)"
242+
height="600"
243+
timezone="Etc/UTC"
244+
major-time-header-template="<strong>#=kendo.toString(date, 'HH:mm')#</strong>">
245+
</kendo-scheduler>
246+
247+
```
248+
{% endif %}
249+
250+
## MinorTimeHeaderTemplate
251+
252+
The `MinorTimeHeaderTemplate` option specifies how the minor ticks are displayed. By default, the Scheduler renders a `&nbsp;`. The following field is available for use in the template:
253+
254+
- `date` (the major tick date)
255+
256+
The following example shows how to configure the `MinorTimeHeaderTemplate` for the Scheduler Component:
257+
258+
```HtmlHelper
259+
.MinorTimeHeaderTemplate("<small>#=kendo.toString(date, 'mm')#</small>")
260+
```
261+
{% if site.core %}
262+
```TagHelper
263+
<kendo-scheduler name="scheduler"
264+
date="new DateTime(2022, 6, 13)"
265+
start-time="new DateTime(2022, 6, 13, 7, 00, 00)"
266+
height="600"
267+
timezone="Etc/UTC"
268+
minor-time-header-template="<small>#=kendo.toString(date, 'mm')#</small>">
269+
</kendo-scheduler>
270+
```
271+
{% endif %}
272+
273+
## ViewsTemplates
274+
275+
The views displayed by the Scheduler can also use all the Templates listed above.
276+
277+
## See Also
278+
279+
* [Using the Scheduler Templates (Demo)](https://demos.telerik.com/{{ site.platform }}/scheduler/templates)
280+
* [Server-Side API of the Scheduler HtmlHelper](/api/scheduler)
281+
{% if site.core %}
282+
* [Server-Side API of the Scheduler TagHelper](/api/taghelpers/scheduler)
283+
{% endif %}
284+
* [Client-Side API of the Scheduler](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler)

0 commit comments

Comments
 (0)