Skip to content

Commit fa6ece4

Browse files
svdimitrsvdimitr
authored
[3.7] Slot Templates (#1192)
* docs(slot-templates): add the slot templates docs * docs(slot-template): update the available views * docs(slot): add a note
1 parent 031f38c commit fa6ece4

File tree

1 file changed

+314
-0
lines changed
  • components/scheduler/templates

1 file changed

+314
-0
lines changed

‎components/scheduler/templates/slot.md‎

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
---
2+
title: Slot
3+
page_title: Scheduler - Slot Templates
4+
description: Use custom rendering for the slots in the Scheduler for Blazor.
5+
slug: scheduler-templates-dateheader
6+
tags: telerik,blazor,scheduler,templates,slot,alldayslot,dateheader
7+
published: True
8+
position: 15
9+
---
10+
11+
# Slot Templates
12+
13+
You can use the `SlotTemplate` and the `AllDaySlotTemplate` to customize the rendering of the slots in the Scheduler.
14+
15+
* [AllDaySlotTemplate](#alldayslottemplate)
16+
* [SlotTemplate](#slottemplate)
17+
18+
## AllDaySlotTemplate
19+
20+
Use the `AllDaySlotTemplate` to provide a custom rendering for the cells in the Telerik Scheduler for Blazor that span across a full day. This template can be defined for the [Day, Multiday, and Week Scheduler views]({%slug scheduler-views-overview%}).
21+
22+
The `context` of the template is a `SchedulerAllDaySlotTemplateContext` object that contains:
23+
24+
| Property | Type | Description |
25+
| --- | --- | --- |
26+
| `Start` | `DateTime` | The slot's start time. |
27+
| `End` | `DateTime` | The slot's end time.|
28+
| `Resources` | `List<KeyValuePair<string, object>` | A collection of resources for which the slot is defined. The collection is populated when the [Resources]({%slug scheduler-resources%}) and [Resource Grouping]({%slug scheduler-resource-grouping%}) features are used. |
29+
30+
## SlotTemplate
31+
32+
Use the `SlotTemplate` to provide a custom rendering for the cells in the Telerik Scheduler for Blazor. This template can be defined for the [Day, Multiday, Month, Timeline, and Week Scheduler views]({%slug scheduler-views-overview%}).
33+
34+
The `context` of the template is a `SchedulerSlotTemplateContext` object that contains:
35+
36+
| Property | Type | Description |
37+
| --- | --- | --- |
38+
| `Start` | `DateTime` | The slot's start time. |
39+
| `End` | `DateTime` | The slot's end time.|
40+
| `Resources` | `List<KeyValuePair<string, object>` | A collection of resources for which the slot is defined. The collection is populated when the [Resources]({%slug scheduler-resources%}) and [Resource Grouping]({%slug scheduler-resource-grouping%}) features are used. |
41+
42+
>note When you use the SlotTemplate in the Timeline Scheduler view, and the content of the template is not a plain string, you must add the `!k-pos-absolute` built-in class to the custom element.
43+
44+
## Example
45+
46+
````CSHMTL
47+
@* Use the AllDaySlotTemplate and SlotTemplate *@
48+
49+
<TelerikScheduler @bind-Date="@SelectedDate" Height="600px" Data="@Data"
50+
@bind-View="@CurrView"
51+
OnCreate="@AddAppointment"
52+
OnUpdate="@UpdateAppointment"
53+
OnDelete="@DeleteAppointment"
54+
AllowDelete="true"
55+
AllowUpdate="true"
56+
AllowCreate="true">
57+
<ItemTemplate>
58+
<div class="scheduler-set-item-template">S.Item: @(((Appointment)context).Title)</div>
59+
</ItemTemplate>
60+
<AllDayItemTemplate>
61+
<div class="scheduler-set-all-day-item-template">S.AllDayItem: @(((Appointment)context).Title)</div>
62+
</AllDayItemTemplate>
63+
<SchedulerViews>
64+
<SchedulerDayView>
65+
<SlotTemplate>
66+
@if (context.Start.TimeOfDay >= ControlDate.TimeOfDay
67+
&& context.End.AddSeconds(-1).TimeOfDay <= ControlDate.AddHours(1).TimeOfDay)
68+
{
69+
<div style="color: green;"><TelerikIcon Icon="pause"></TelerikIcon>Lunch Break</div>
70+
}
71+
</SlotTemplate>
72+
<AllDaySlotTemplate>
73+
<div style="color: blue;">AllDay SlotTemplate</div>
74+
</AllDaySlotTemplate>
75+
<ItemTemplate>
76+
<div class="view-set-item-template">V.Item: @(((Appointment)context).Title)</div>
77+
</ItemTemplate>
78+
</SchedulerDayView>
79+
<SchedulerWeekView>
80+
<SlotTemplate>
81+
@if (context.Start.TimeOfDay >= ControlDate.TimeOfDay
82+
&& context.End.AddSeconds(-1).TimeOfDay <= ControlDate.AddHours(1).TimeOfDay)
83+
{
84+
<div style="color: green;"><TelerikIcon Icon="pause"></TelerikIcon>Lunch Break</div>
85+
}
86+
</SlotTemplate>
87+
<AllDaySlotTemplate>
88+
<div style="color: blue;">AllDay week SlotTemplate</div>
89+
</AllDaySlotTemplate>
90+
</SchedulerWeekView>
91+
<SchedulerMonthView>
92+
<SlotTemplate>
93+
@{
94+
var dayNumber = context.Start.Day;
95+
<span class="k-link" @onclick="() => OnDateClick(dayNumber)">
96+
@context.Start.Day
97+
</span>
98+
99+
if (context.Start.DayOfWeek == DayOfWeek.Saturday
100+
|| context.Start.DayOfWeek == DayOfWeek.Sunday)
101+
{
102+
<div style="color: green;"><span>Free Weekend</span></div>
103+
}
104+
}
105+
</SlotTemplate>
106+
<ItemTemplate>
107+
<div class="view-set-item-template">V.Item: @(((Appointment)context).Title)</div>
108+
</ItemTemplate>
109+
</SchedulerMonthView>
110+
<SchedulerTimelineView>
111+
<SlotTemplate>
112+
@if (context.Start.Day % 2 == 0)
113+
{
114+
<div style="color: green;">Workout Day</div>
115+
}
116+
else
117+
{
118+
<div>Rest Day</div>
119+
}
120+
</SlotTemplate>
121+
<ItemTemplate>
122+
<div class="view-set-item-template">V.Item: @(((Appointment)context).Title)</div>
123+
</ItemTemplate>
124+
</SchedulerTimelineView>
125+
</SchedulerViews>
126+
</TelerikScheduler>
127+
@code
128+
{
129+
private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
130+
private DateTime ControlDate { get; set; } = new DateTime(2000, 1, 1, 12, 0, 0);
131+
private SchedulerView CurrView { get; set; }
132+
List<Appointment> Data = new List<Appointment>();
133+
134+
protected override void OnInitialized()
135+
{
136+
Data = AppointmentService.GetAppointments();
137+
138+
base.OnInitialized();
139+
}
140+
141+
private void UpdateAppointment(SchedulerUpdateEventArgs args)
142+
{
143+
Appointment item = (Appointment)args.Item;
144+
145+
var matchingItem = Data.FirstOrDefault(a => a.Id == item.Id);
146+
147+
if (matchingItem != null)
148+
{
149+
matchingItem.Title = item.Title;
150+
matchingItem.Description = item.Description;
151+
matchingItem.Start = item.Start;
152+
matchingItem.End = item.End;
153+
matchingItem.IsAllDay = item.IsAllDay;
154+
}
155+
}
156+
157+
private void OnDateClick(int day)
158+
{
159+
var currentDate = DateTime.Now;
160+
var navigateDate = new DateTime(currentDate.Year, currentDate.Month, day);
161+
162+
CurrView = SchedulerView.Day;
163+
SelectedDate = navigateDate;
164+
}
165+
166+
private void AddAppointment(SchedulerCreateEventArgs args)
167+
{
168+
Appointment item = args.Item as Appointment;
169+
170+
Data.Add(item);
171+
}
172+
173+
private void DeleteAppointment(SchedulerDeleteEventArgs args)
174+
{
175+
Appointment item = (Appointment)args.Item;
176+
177+
Data.Remove(item);
178+
}
179+
180+
private class AppointmentService
181+
{
182+
public static async Task<List<Appointment>> GetAppointmentsAsync()
183+
{
184+
await Task.Delay(100);
185+
186+
return GetAppointments();
187+
}
188+
189+
public static List<Appointment> GetAppointments()
190+
{
191+
List<Appointment> data = new List<Appointment>();
192+
DateTime baselineTime = GetStartTime();
193+
194+
data.Add(new Appointment
195+
{
196+
Title = "Vet visit",
197+
Description = "The cat needs vaccinations and her teeth checked.",
198+
Start = baselineTime.AddHours(2),
199+
End = baselineTime.AddHours(2).AddMinutes(30)
200+
});
201+
202+
data.Add(new Appointment
203+
{
204+
Title = "Trip to Hawaii",
205+
Description = "An unforgettable holiday!",
206+
IsAllDay = true,
207+
Start = baselineTime.AddDays(-10),
208+
End = baselineTime.AddDays(-2)
209+
});
210+
211+
data.Add(new Appointment
212+
{
213+
Title = "Jane's birthday party",
214+
Description = "Make sure to get her fresh flowers in addition to the gift.",
215+
Start = baselineTime.AddDays(5).AddHours(10),
216+
End = baselineTime.AddDays(5).AddHours(18),
217+
});
218+
219+
data.Add(new Appointment
220+
{
221+
Title = "One-on-one with the manager",
222+
Start = baselineTime.AddDays(2).AddHours(3).AddMinutes(30),
223+
End = baselineTime.AddDays(2).AddHours(3).AddMinutes(45),
224+
});
225+
226+
data.Add(new Appointment
227+
{
228+
Title = "Brunch with HR",
229+
Description = "Performance evaluation of the new recruit.",
230+
Start = baselineTime.AddDays(3).AddHours(3),
231+
End = baselineTime.AddDays(3).AddHours(3).AddMinutes(45)
232+
});
233+
234+
data.Add(new Appointment
235+
{
236+
Title = "Interview with new recruit",
237+
Description = "See if John will be a suitable match for our team.",
238+
Start = baselineTime.AddDays(3).AddHours(1).AddMinutes(30),
239+
End = baselineTime.AddDays(3).AddHours(2).AddMinutes(30)
240+
});
241+
242+
data.Add(new Appointment
243+
{
244+
Title = "Conference",
245+
Description = "The big important work conference. Don't forget to practice your presentation.",
246+
Start = baselineTime.AddDays(6),
247+
End = baselineTime.AddDays(11),
248+
IsAllDay = true
249+
});
250+
251+
data.Add(new Appointment
252+
{
253+
Title = "New Project Kickoff",
254+
Description = "Everyone assemble! We will also have clients on the call from a later time zone.",
255+
Start = baselineTime.AddDays(3).AddHours(8).AddMinutes(30),
256+
End = baselineTime.AddDays(3).AddHours(11).AddMinutes(30)
257+
});
258+
259+
data.Add(new Appointment
260+
{
261+
Title = "Get photos",
262+
Description = "Get the printed photos from last week's holiday. It's on the way from the vet to work.",
263+
Start = baselineTime.AddHours(2).AddMinutes(15),
264+
End = baselineTime.AddHours(2).AddMinutes(30)
265+
});
266+
267+
var rng = new Random();
268+
var startDate = new DateTime(2019, 11, 10);
269+
270+
271+
return data;
272+
}
273+
274+
public static DateTime GetStartTime()
275+
{
276+
DateTime dt = new DateTime(2019, 12, 11);
277+
int daysSinceMonday = dt.DayOfWeek - DayOfWeek.Monday;
278+
return new DateTime(dt.Year, dt.Month, dt.Day - daysSinceMonday, 8, 0, 0);
279+
}
280+
}
281+
282+
private class Appointment
283+
{
284+
public Guid Id { get; set; }
285+
286+
public string Title { get; set; }
287+
288+
public DateTime Start { get; set; }
289+
290+
public DateTime End { get; set; }
291+
292+
public bool IsAllDay { get; set; }
293+
294+
public string Description { get; set; }
295+
296+
public string Room { get; set; }
297+
298+
public string Manager { get; set; }
299+
300+
public Appointment()
301+
{
302+
var rand = new Random();
303+
Id = Guid.NewGuid();
304+
Room = rand.Next(1, 3).ToString();
305+
Manager = rand.Next(1, 4).ToString();
306+
}
307+
}
308+
}
309+
````
310+
311+
## See Also
312+
313+
* [Live Demo: Scheduler Templates](https://demos.telerik.com/blazor-ui/scheduler/templates)
314+

0 commit comments

Comments
 (0)