Skip to content

Commit 5a3f3d2

Browse files
marin-bratanovmarin-bratanov
committed
docs(scheduler): data binding article
1 parent db44b16 commit 5a3f3d2

File tree

7 files changed

+203
-57
lines changed

7 files changed

+203
-57
lines changed

‎_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ navigation:
7979
position: 2
8080
"*components/scheduler/views":
8181
title: "Views"
82-
position: 3
82+
position: 5
8383

8484
## List helpers directory names and order here, like this:
8585
"*appearance":

‎components/scheduler/appointments/overview.md

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎components/scheduler/data-bind.md

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
---
2+
title: Data Binding
3+
page_title: Scheduler for Blazor | Data Binding Appointments
4+
description: Data Binding appointments in the Scheduler for Blazor
5+
slug: scheduler-appointments-databinding
6+
tags: telerik,blazor,scheduler,data,bind,databind,databinding,appointments
7+
published: True
8+
position: 1
9+
---
10+
11+
# Scheduler Appointments Data Binding
12+
13+
The Scheduler component is designed to work with a collection of appointments. This article will explain their basic features.
14+
15+
In this article:
16+
17+
* [Appointment Features](#appointment-features)
18+
* [Built-in Validation](#built-in-validation)
19+
* [Examples](#examples)
20+
21+
22+
23+
## Appointment Features
24+
25+
The scheduler appointments provide the following features that you control through the corresponding fields in their data binding. The appointment model needs to provide all fields from the list below.
26+
27+
* `Title` - (`string`) - this is what is shown in the main scheduler view so the user can identify the event.
28+
* `Start` - (`DateTime`) - the date and time at which the appointment starts.
29+
* `End` - (`DateTime`) - the date and time at which the appointment ends.
30+
* `Description` - (`string`) - detailed description of the event. Shown in the edit form.
31+
* `IsAllDay` - (`bool`) - whether the event is shown in the all-day slot in the applicable views. Such events are not rendered in a specific time interval (slot), but are always shown when their day is visible.
32+
33+
The list above shows the default field names for data binding. If your model uses the same field names, you don't have to set the field names explicitly. Otherwise, the `<Property>Field` parameters of the scheduler must be set to point to the field names of the model.
34+
35+
>caption Sample model with default field names
36+
37+
````CSHTML
38+
public class SchedulerAppointment
39+
{
40+
public string Title { get; set; }
41+
public string Description { get; set; }
42+
public DateTime Start { get; set; }
43+
public DateTime End { get; set; }
44+
public bool IsAllDay { get; set; }
45+
}
46+
````
47+
48+
>tip You are not limited to using these fields only. Your model can carry additional information that will be used by your custom logic (for example, an ID for the [CUD operations]({%slug scheduler-appointments-edit%})).
49+
50+
51+
## Built-in Validation
52+
53+
By default, the scheduler requires that an appointment has:
54+
55+
* title - this is what is rendered for the user to see
56+
* start time - so the scheduler can know where to render it
57+
* end time - so the scheduler can know where it ends
58+
59+
The built-in edit form also enforces that the end time is after the start time.
60+
61+
The scheduler edit form works with an instance that that the scheduler creates from the provided model from its data source. This means that custom validation rules (attributes) in the model will not be used by the scheduler. To implement custom validation logic, implement a custom edit form. Make sure that the same three fields, at minimum, are required and available in the appointments you store, otherwise errors may be thrown.
62+
63+
64+
## Examples
65+
66+
>caption Data Binding to a model that uses the default field names
67+
68+
````CSHTML
69+
@* This model uses the default fields names, so you only need to define the scheduler appearance properties and views *@
70+
71+
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
72+
<SchedulerViews>
73+
<SchedulerDayView StartTime="@DayStart" />
74+
<SchedulerWeekView StartTime="@DayStart" />
75+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
76+
</SchedulerViews>
77+
</TelerikScheduler>
78+
79+
@code {
80+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
81+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
82+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
83+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
84+
{
85+
new SchedulerAppointment
86+
{
87+
Title = "Vet visit",
88+
Description = "The cat needs vaccinations and her teeth checked.",
89+
Start = new DateTime(2019, 11, 26, 11, 30, 0),
90+
End = new DateTime(2019, 11, 26, 12, 0, 0)
91+
},
92+
93+
new SchedulerAppointment
94+
{
95+
Title = "Planning meeting",
96+
Description = "Kick off the new project.",
97+
Start = new DateTime(2019, 11, 25, 9, 30, 0),
98+
End = new DateTime(2019, 11, 25, 12, 45, 0)
99+
},
100+
101+
new SchedulerAppointment
102+
{
103+
Title = "Trip to Hawaii",
104+
Description = "An unforgettable holiday!",
105+
IsAllDay = true,
106+
Start = new DateTime(2019, 11, 27),
107+
End = new DateTime(2019, 12, 07)
108+
}
109+
};
110+
111+
public class SchedulerAppointment
112+
{
113+
public string Title { get; set; }
114+
public string Description { get; set; }
115+
public DateTime Start { get; set; }
116+
public DateTime End { get; set; }
117+
public bool IsAllDay { get; set; }
118+
}
119+
}
120+
````
121+
122+
>caption Data Binding to a model with custom field names
123+
124+
````CSHTML
125+
@* This model uses custom fields that do not match the default settings. The example shows how to tell the scheduler in which fields to look for the information. You are not required to use the nameof operator, you can "hardcode" the string names as well. *@
126+
127+
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px"
128+
TitleField="@(nameof(SchedulerAppointment.AppointmentTitle))"
129+
DescriptionField="@(nameof(SchedulerAppointment.ApptDescription))"
130+
StartField="@(nameof(SchedulerAppointment.StartTime))"
131+
EndField="@(nameof(SchedulerAppointment.EndTime))"
132+
IsAllDayField="@(nameof(SchedulerAppointment.AllDayAppt))"
133+
>
134+
<SchedulerViews>
135+
<SchedulerDayView StartTime="@DayStart" />
136+
<SchedulerWeekView StartTime="@DayStart" />
137+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
138+
</SchedulerViews>
139+
</TelerikScheduler>
140+
141+
@code {
142+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
143+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
144+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
145+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
146+
{
147+
new SchedulerAppointment
148+
{
149+
AppointmentTitle = "Vet visit",
150+
ApptDescription = "The cat needs vaccinations and her teeth checked.",
151+
StartTime = new DateTime(2019, 11, 26, 11, 30, 0),
152+
EndTime = new DateTime(2019, 11, 26, 12, 0, 0)
153+
},
154+
155+
new SchedulerAppointment
156+
{
157+
AppointmentTitle = "Planning meeting",
158+
ApptDescription = "Kick off the new project.",
159+
StartTime = new DateTime(2019, 11, 25, 9, 30, 0),
160+
EndTime = new DateTime(2019, 11, 25, 12, 45, 0)
161+
},
162+
163+
new SchedulerAppointment
164+
{
165+
AppointmentTitle = "Trip to Hawaii",
166+
ApptDescription = "An unforgettable holiday!",
167+
StartTime = new DateTime(2019, 11, 27),
168+
EndTime = new DateTime(2019, 12, 07),
169+
AllDayAppt = true
170+
}
171+
};
172+
173+
public class SchedulerAppointment
174+
{
175+
public string AppointmentTitle { get; set; }
176+
public string ApptDescription { get; set; }
177+
public DateTime StartTime { get; set; }
178+
public DateTime EndTime { get; set; }
179+
public bool AllDayAppt { get; set; }
180+
}
181+
}
182+
````
183+
184+
185+
186+
## See Also
187+
188+
* [Live Demo: Scheduler](https://demos.telerik.com/blazor-ui/scheduler/overview)
189+
* [Editing Appointments]({%slug scheduler-appointments-edit%})
190+
191+

‎components/scheduler/appointments/edit.md renamed to ‎components/scheduler/edit-appointments.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
title: Editing
2+
title: Edit Appointments
33
page_title: Scheduler for Blazor | Edit Appointments
44
description: Edit Appointments in the Scheduler for Blazor
55
slug: scheduler-appointments-edit
66
tags: telerik,blazor,scheduler,appointment,appointments,edit,editing
77
published: True
8-
position: 1
8+
position: 3
99
---
1010

1111
# Edit Appointments
@@ -40,6 +40,11 @@ There are two other events that you are not required to handle - you can use the
4040

4141
## User Experience
4242

43+
>caption Some examples of the UX related to appointments, read more in the list after the figure
44+
45+
![](images/ux-explanations.png)
46+
47+
4348
The UI for the scheduler provides the following options for interacting with the appointments collection:
4449

4550
* Double click (or double tap) on an empty slot starts the process of inserting a new appointment. The user can cancel it without committing the data.
@@ -54,9 +59,6 @@ The UI for the scheduler provides the following options for interacting with the
5459
* An appointment that spans multiple days but is not marked as an all-day appointment shows up in the all-day slot for the days that it spans entirely. The first and last day would render in the day portions to denote the start and end time accurately.
5560

5661

57-
>caption Some examples of the UX explanations above
58-
59-
![](images/ux-explanations.png)
6062

6163

6264
## Example
@@ -207,6 +209,6 @@ The example below shows the signature of the event handlers so you can copy the
207209

208210
## See Also
209211

210-
* [Appointments Overview]({%slug scheduler-appointments-overview%})
212+
* [Data Binding]({%slug scheduler-appointments-databinding%})
211213
* [Live Demo: Appointment Editing](https://demos.telerik.com/blazor-ui/scheduler/appointment-editing)
212214

‎components/scheduler/events.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,6 @@ The `ViewChanged` event fires when the user chooses a new [View]({%slug schedule
206206
* [Scheduler Overview]({%slug scheduler-overview%})
207207
* [Views Overview]({%slug scheduler-views-overview%})
208208
* [Scheduler Naviation]({%slug scheduler-navigation%})
209-
* [Appointments Overview]({%slug scheduler-appointments-overview%})
209+
* [Data Binding]({%slug scheduler-appointments-databinding%})
210210
* [Appointments Editing]({%slug scheduler-appointments-edit%})
211211

‎components/scheduler/appointments/images/ux-explanations.png renamed to ‎components/scheduler/images/ux-explanations.png

File renamed without changes.

‎components/scheduler/overview.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ The Scheduler component lets the user see, edit and add appointments so they can
1515
To use a Telerik Scheduler for Blazor
1616

1717
1. Add the `TelerikScheduler` tag.
18-
1. Populate its `Data` property with the collection of appointments/events the user needs to see. See the [Appointments Overview]({%slug scheduler-appointments-overview%}) article for details on the needed fields.
18+
1. Populate its `Data` property with the collection of appointments/events the user needs to see. See the [Data Binding]({%slug scheduler-appointments-databinding%}) article for details on the fields.
1919
1. Define the Views the user can toggle between in the `SchedulerViews` collection. Optionally, set their settings (such as days start and end) and choose a default View.
2020

2121
>caption Scheduler first look and main features
@@ -120,6 +120,6 @@ The Scheduler is a generic component and its type is determined by the type of t
120120

121121
## See Also
122122

123-
* [Appointment Options]({%slug scheduler-appointments-overview%})
123+
* [Data Binding]({%slug scheduler-appointments-databinding%})
124124
* [Live Demo: Scheduler](https://demos.telerik.com/blazor-ui/scheduler/overview)
125125

0 commit comments

Comments
 (0)