Skip to content

Commit 9ee9da8

Browse files
marin-bratanovmarin-bratanov
committed
docs(scheduler): events
1 parent 8d05548 commit 9ee9da8

File tree

3 files changed

+187
-5
lines changed

3 files changed

+187
-5
lines changed

‎components/scheduler/events.md‎

Lines changed: 186 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,208 @@ position: 20
1212

1313
This article explains the events available in the Telerik Scheduler for Blazor:
1414

15+
* [CUD Events](#cud-events)
1516
* [DateChanged](#datechanged)
1617
* [ViewChanged](#viewchanged)
17-
* [OnRead](#onread)
1818

19+
## CUD Events
20+
21+
To implement appointment editing, the scheduler exposes the `OnCreate`, `OnDelete` and `OnUpdate` events. They let you propagate the changes the user makes in the UI to the view model and to the data storage. You can read mode in the [Appointment Editing]({%slug scheduler-appointments-edit%}) article.
1922

2023
## DateChanged
2124

25+
The `DateChanged` event fires when the user [navigates]({%slug scheduler-navigation%}) to another date in the scheduler. For a view whose start is determined by outside factors and not only by the `Date` parameter (the week view), the event argument may not always be the start time of the range, but a date contained within the range.
26+
27+
>caption Handle the `DateChanged` event
28+
29+
30+
````CSHTML
31+
@* Try navigating to the previous or next period, today or a random date, then repeat after changing the view *@
32+
33+
@result
34+
35+
<TelerikScheduler Data="@Appointments" @bind-View="@CurrView" Height="600px"
36+
Date="@StartDate" DateChanged="@DateChangedHandler"
37+
StartField="@(nameof(SchedulerAppointment.StartTime))"
38+
EndField="@(nameof(SchedulerAppointment.EndTime))"
39+
TitleField="@(nameof(SchedulerAppointment.Title))"
40+
DescriptionField="@(nameof(SchedulerAppointment.Description))"
41+
IsAllDayField="@(nameof(SchedulerAppointment.IsAllDay))">
42+
<SchedulerViews>
43+
<SchedulerDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
44+
<SchedulerMultiDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" NumberOfDays="3" />
45+
<SchedulerWeekView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
46+
</SchedulerViews>
47+
</TelerikScheduler>
48+
49+
@code {
50+
string result { get; set; }
51+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
52+
async Task DateChangedHandler(DateTime currDate)
53+
{
54+
result = $"The user went to a range that contains the {currStart.ToShortDateString()} date";
55+
56+
// update the model field the scheduler uses, otherwise it may revert
57+
// to the default/initial/previous value upon repainting
58+
StartDate = currDate;
59+
}
60+
61+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
62+
//the time portions are important
63+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
64+
public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);
65+
public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
66+
public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
67+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
68+
{
69+
new SchedulerAppointment
70+
{
71+
Title = "Board meeting",
72+
Description = "Q4 is coming to a close, review the details.",
73+
StartTime = new DateTime(2019, 12, 5, 10, 00, 0),
74+
EndTime = new DateTime(2019, 12, 5, 11, 30, 0)
75+
},
76+
77+
new SchedulerAppointment
78+
{
79+
Title = "Vet visit",
80+
Description = "The cat needs vaccinations and her teeth checked.",
81+
StartTime = new DateTime(2019, 11, 29, 11, 30, 0),
82+
EndTime = new DateTime(2019, 11, 29, 12, 0, 0)
83+
},
84+
85+
new SchedulerAppointment
86+
{
87+
Title = "Planning meeting",
88+
Description = "Kick off the new project.",
89+
StartTime = new DateTime(2019, 12, 6, 9, 30, 0),
90+
EndTime = new DateTime(2019, 12, 6, 12, 45, 0)
91+
},
92+
93+
new SchedulerAppointment
94+
{
95+
Title = "Trip to Hawaii",
96+
Description = "An unforgettable holiday!",
97+
IsAllDay = true,
98+
StartTime = new DateTime(2019, 11, 27),
99+
EndTime = new DateTime(2019, 12, 05)
100+
}
101+
};
102+
103+
public class SchedulerAppointment
104+
{
105+
public string Title { get; set; }
106+
public string Description { get; set; }
107+
public DateTime StartTime { get; set; }
108+
public DateTime EndTime { get; set; }
109+
public bool IsAllDay { get; set; }
110+
}
111+
}
112+
````
113+
22114

23115
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
24116

25-
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
26117

27118

28119

29120

30121
## ViewChanged
31122

123+
The `ViewChanged` event fires when the user chooses a new [View]({%slug scheduler-views-overview%}). You can read more about the navigation options the user has in the [Navigation]({%slug scheduler-navigation%}) article.
124+
125+
>caption Handle the `ViewChanged` event.
126+
127+
````CSHTML
128+
@result
129+
130+
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" Height="600px"
131+
View="@CurrView" ViewChanged="@ViewChangedHandler"
132+
StartField="@(nameof(SchedulerAppointment.StartTime))"
133+
EndField="@(nameof(SchedulerAppointment.EndTime))"
134+
TitleField="@(nameof(SchedulerAppointment.Title))"
135+
DescriptionField="@(nameof(SchedulerAppointment.Description))"
136+
IsAllDayField="@(nameof(SchedulerAppointment.IsAllDay))">
137+
<SchedulerViews>
138+
<SchedulerDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
139+
<SchedulerMultiDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" NumberOfDays="3" />
140+
<SchedulerWeekView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
141+
</SchedulerViews>
142+
</TelerikScheduler>
143+
144+
@code {
145+
string result { get; set; }
146+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
147+
async Task ViewChangedHandler(SchedulerView nextView)
148+
{
149+
result = $"The user went to the {nextView.ToString()} view on {DateTime.Now}";
150+
151+
// update the model field the scheduler uses, otherwise it may revert
152+
// to the default/initial/previous value upon repainting
153+
CurrView = nextView;
154+
}
155+
156+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
157+
//the time portions are important
158+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
159+
public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);
160+
public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
161+
public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
162+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
163+
{
164+
new SchedulerAppointment
165+
{
166+
Title = "Board meeting",
167+
Description = "Q4 is coming to a close, review the details.",
168+
StartTime = new DateTime(2019, 12, 5, 10, 00, 0),
169+
EndTime = new DateTime(2019, 12, 5, 11, 30, 0)
170+
},
171+
172+
new SchedulerAppointment
173+
{
174+
Title = "Vet visit",
175+
Description = "The cat needs vaccinations and her teeth checked.",
176+
StartTime = new DateTime(2019, 11, 29, 11, 30, 0),
177+
EndTime = new DateTime(2019, 11, 29, 12, 0, 0)
178+
},
179+
180+
new SchedulerAppointment
181+
{
182+
Title = "Planning meeting",
183+
Description = "Kick off the new project.",
184+
StartTime = new DateTime(2019, 12, 6, 9, 30, 0),
185+
EndTime = new DateTime(2019, 12, 6, 12, 45, 0)
186+
},
187+
188+
new SchedulerAppointment
189+
{
190+
Title = "Trip to Hawaii",
191+
Description = "An unforgettable holiday!",
192+
IsAllDay = true,
193+
StartTime = new DateTime(2019, 11, 27),
194+
EndTime = new DateTime(2019, 12, 05)
195+
}
196+
};
197+
198+
public class SchedulerAppointment
199+
{
200+
public string Title { get; set; }
201+
public string Description { get; set; }
202+
public DateTime StartTime { get; set; }
203+
public DateTime EndTime { get; set; }
204+
public bool IsAllDay { get; set; }
205+
}
206+
}
207+
````
208+
209+
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
32210

33-
## OnRead
34211

212+
## See Also
35213

214+
* [Scheduler Overview]({%slug scheduler-overview%})
215+
* [Views Overview]({%slug scheduler-views-overview%})
216+
* [Scheduler Naviation]({%slug scheduler-navigation%})
217+
* [Appointments Overview]({%slug scheduler-appointments-overview%})
218+
* [Appointments Editing]({%slug scheduler-appointments-edit%})
36219

‎components/scheduler/manual-operations.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ page_title: Scheduler for Blazor | Manual Operations
44
description: How to implement your own read and navigate operations for the scheduler appointments.
55
slug: scheduler-manual-operations
66
tags: telerik,blazor,scheduler,read,navigate,manual,data,data source
7-
published: True
7+
published: false
88
position: 15
99
---
1010

‎components/scheduler/views/day.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ In this article:
4646
4747
@code {
4848
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
49-
public SchedulerView CurrView { get; set; } = SchedulerView.Day;
5049
//the time portions are important
5150
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
5251
public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);

0 commit comments

Comments
 (0)