Skip to content

Commit 295a8ce

Browse files
marin-bratanovmarin-bratanov
committed
docs(scheduler): individual views articles
1 parent 38d5c9d commit 295a8ce

File tree

11 files changed

+315
-42
lines changed

11 files changed

+315
-42
lines changed

‎_contentTemplates/scheduler/views.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
#day-views-common-properties
2+
## View Parameters
3+
4+
Generally, the views are designed around the timeframe that they show and the day-based views share some common properties that you will likely have to set to provide a good user experience for the user:
5+
6+
* `StartTime` - this is the first hour that is shown in the view. Defaults to midnight, so if you do not set it to a value close to the start of the working day, the user is likely to see only blank spaces before they scroll down.
7+
8+
* `WorkDayStart` - this is when the working day starts. The work hours have a different background than non-working hours so the user can distinguish them easily. This parameter also influences the "Show Business Hours" toggle.
9+
10+
* `EndTime` - the counterpart to `StartTime` - defines when the full day ends. Defaults to midnight. If you have the day end earlier you can reduce the amount of elements that render, but the user may not see some late appointments.
11+
12+
* `WorkDayStart` - the counterpart to `WorkDayStart` - defines when the working day ends.
13+
14+
If there are appointments outside of the defined visible time the user will not be able to see them. For most cases where the working day is subject to scheduling this may not be a problem, but if your users need to manage night shifts or irregular work hours, you may want to have a longer day rendered, or to bind the value to a time picker so the user can alter it themselves.
15+
16+
17+
#end
18+
19+
#day-slots-explanation
20+
### Slots
21+
22+
Views that show hours let you control their precision through the `SlotDuration` and `SlotDivisions` parameters:
23+
24+
1. `SlotDuration` - the time between the hour markers.
25+
1. `SlotDivisions` - how many partitions each time between the hour markers is separated into.
26+
27+
>caption Figure: Slots explanation
28+
29+
![](images/slot-example.png)
30+
#end

‎components/scheduler/appointments/edit.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ The example below shows the signature of the event handlers so you can copy the
162162
new SchedulerAppointment
163163
{
164164
Title = "Planning meeting",
165-
Description = "The cat needs vaccinations and her teeth checked.",
165+
Description = "Kick off the new project.",
166166
StartTime = new DateTime(2019, 11, 25, 9, 30, 0),
167167
EndTime = new DateTime(2019, 11, 25, 12, 45, 0)
168168
},

‎components/scheduler/navigation.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ Change current View:
7575
public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
7676
public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
7777
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
78-
{
78+
{
7979
new SchedulerAppointment
8080
{
8181
Title = "Vet visit",
@@ -87,7 +87,7 @@ Change current View:
8787
new SchedulerAppointment
8888
{
8989
Title = "Planning meeting",
90-
Description = "The cat needs vaccinations and her teeth checked.",
90+
Description = "Kick off the new project.",
9191
StartTime = new DateTime(2019, 11, 25, 9, 30, 0),
9292
EndTime = new DateTime(2019, 11, 25, 12, 45, 0)
9393
},

‎components/scheduler/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ To use a Telerik Scheduler for Blazor
5858
new SchedulerAppointment
5959
{
6060
Title = "Planning meeting",
61-
Description = "The cat needs vaccinations and her teeth checked.",
61+
Description = "Kick off the new project.",
6262
StartTime = new DateTime(2019, 11, 25, 9, 30, 0),
6363
EndTime = new DateTime(2019, 11, 25, 12, 45, 0)
6464
},

‎components/scheduler/views/day.md‎

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,103 @@ position: 1
1010

1111
# Day View
1212

13-
Day view description, properties, short snippet, screenshot
13+
The Day view of the Scheduler for Blazor shows a single day to the user.
1414

15+
The `Date` parameter of the scheduler controls which date is displayed.
16+
17+
In this article:
18+
19+
* [Example](#example)
20+
* [View Parameters](#view-parameters)
21+
* [Slots](#slots)
22+
23+
>caption Figure: Day View in the scheduler
24+
25+
![](images/day-view-sample.png)
26+
27+
## Example
28+
29+
>caption Declare the Day View in the markup
30+
31+
>tip You can declare other views as well, this example adds only the day view for brevity.
32+
33+
````CSHTML
34+
@* Define the day view. The screenshot above is the result from this code snippet *@
35+
36+
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" Height="600px"
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+
</SchedulerViews>
45+
</TelerikScheduler>
46+
47+
@code {
48+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
49+
public SchedulerView CurrView { get; set; } = SchedulerView.Day;
50+
//the time portions are important
51+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
52+
public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);
53+
public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
54+
public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
55+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
56+
{
57+
new SchedulerAppointment
58+
{
59+
Title = "Board meeting",
60+
Description = "Q4 is coming to a close, review the details.",
61+
StartTime = new DateTime(2019, 11, 29, 10, 00, 0),
62+
EndTime = new DateTime(2019, 11, 29, 11, 30, 0)
63+
},
64+
65+
new SchedulerAppointment
66+
{
67+
Title = "Vet visit",
68+
Description = "The cat needs vaccinations and her teeth checked.",
69+
StartTime = new DateTime(2019, 11, 28, 11, 30, 0),
70+
EndTime = new DateTime(2019, 11, 28, 12, 0, 0)
71+
},
72+
73+
new SchedulerAppointment
74+
{
75+
Title = "Planning meeting",
76+
Description = "Kick off the new project.",
77+
StartTime = new DateTime(2019, 11, 30, 9, 30, 0),
78+
EndTime = new DateTime(2019, 11, 30, 12, 45, 0)
79+
},
80+
81+
new SchedulerAppointment
82+
{
83+
Title = "Trip to Hawaii",
84+
Description = "An unforgettable holiday!",
85+
IsAllDay = true,
86+
StartTime = new DateTime(2019, 11, 27),
87+
EndTime = new DateTime(2019, 12, 07)
88+
}
89+
};
90+
91+
public class SchedulerAppointment
92+
{
93+
public string Title { get; set; }
94+
public string Description { get; set; }
95+
public DateTime StartTime { get; set; }
96+
public DateTime EndTime { get; set; }
97+
public bool IsAllDay { get; set; }
98+
}
99+
}
100+
````
101+
102+
@[template](/_contentTemplates/scheduler/views.md#day-views-common-properties)
103+
104+
@[template](/_contentTemplates/scheduler/views.md#day-slots-explanation)
15105

16106

17107
## See Also
18108

19109
* [Views]({%slug scheduler-views-overview%})
110+
* [Navigation]({%slug scheduler-navigation%})
20111
* [Live Demo: Scheduler Day View](https://demos.telerik.com/blazor-ui/scheduler/day-view)
21112

‎components/scheduler/views/images/day-view-sample.png‎

21.8 KB
Loading

‎components/scheduler/views/images/multiday-view-sample.png‎

32.6 KB
Loading

‎components/scheduler/views/images/week-view-sample.png‎

30.7 KB
Loading

‎components/scheduler/views/multiday.md‎

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,105 @@ position: 1
1010

1111
# MultiDay View
1212

13-
MultiDay view description, properties, short snippet, screenshot
13+
The MultiDay view of the Scheduler for Blazor shows several days at once to the user.
1414

15+
The `Date` parameter of the scheduler controls which is the first rendered date, and the `NumberOfDays` parameter of the View controls how many days will be rendered.
16+
17+
In this article:
18+
19+
* [Example](#example)
20+
* [View Parameters](#view-parameters)
21+
* [Slots](#slots)
22+
23+
>caption Figure: MultiDay View in the scheduler
24+
25+
![](images/multiday-view-sample.png)
26+
27+
## Example
28+
29+
>caption Declare the MultiDay View in the markup
30+
31+
>tip You can declare other views as well, this example adds only the multiday view for brevity.
32+
33+
34+
````CSHTML
35+
@* Define the multiday view. The screenshot above is the result from this code snippet *@
36+
37+
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" Height="600px"
38+
StartField="@(nameof(SchedulerAppointment.StartTime))"
39+
EndField="@(nameof(SchedulerAppointment.EndTime))"
40+
TitleField="@(nameof(SchedulerAppointment.Title))"
41+
DescriptionField="@(nameof(SchedulerAppointment.Description))"
42+
IsAllDayField="@(nameof(SchedulerAppointment.IsAllDay))">
43+
<SchedulerViews>
44+
<SchedulerMultiDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" NumberOfDays="10" />
45+
</SchedulerViews>
46+
</TelerikScheduler>
47+
48+
@code {
49+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
50+
public SchedulerView CurrView { get; set; } = SchedulerView.Day;
51+
//the time portions are important
52+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
53+
public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);
54+
public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
55+
public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
56+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
57+
{
58+
new SchedulerAppointment
59+
{
60+
Title = "Board meeting",
61+
Description = "Q4 is coming to a close, review the details.",
62+
StartTime = new DateTime(2019, 12, 5, 10, 00, 0),
63+
EndTime = new DateTime(2019, 12, 5, 11, 30, 0)
64+
},
65+
66+
new SchedulerAppointment
67+
{
68+
Title = "Vet visit",
69+
Description = "The cat needs vaccinations and her teeth checked.",
70+
StartTime = new DateTime(2019, 11, 29, 11, 30, 0),
71+
EndTime = new DateTime(2019, 11, 29, 12, 0, 0)
72+
},
73+
74+
new SchedulerAppointment
75+
{
76+
Title = "Planning meeting",
77+
Description = "Kick off the new project.",
78+
StartTime = new DateTime(2019, 12, 6, 9, 30, 0),
79+
EndTime = new DateTime(2019, 12, 6, 12, 45, 0)
80+
},
81+
82+
new SchedulerAppointment
83+
{
84+
Title = "Trip to Hawaii",
85+
Description = "An unforgettable holiday!",
86+
IsAllDay = true,
87+
StartTime = new DateTime(2019, 11, 27),
88+
EndTime = new DateTime(2019, 12, 05)
89+
}
90+
};
91+
92+
public class SchedulerAppointment
93+
{
94+
public string Title { get; set; }
95+
public string Description { get; set; }
96+
public DateTime StartTime { get; set; }
97+
public DateTime EndTime { get; set; }
98+
public bool IsAllDay { get; set; }
99+
}
100+
}
101+
````
102+
103+
104+
@[template](/_contentTemplates/scheduler/views.md#day-views-common-properties)
105+
106+
@[template](/_contentTemplates/scheduler/views.md#day-slots-explanation)
15107

16108

17109
## See Also
18110

19111
* [Views]({%slug scheduler-views-overview%})
112+
* [Navigation]({%slug scheduler-navigation%})
20113
* [Live Demo: Scheduler MultiDay View](https://demos.telerik.com/blazor-ui/scheduler/multiday-view)
21114

‎components/scheduler/views/overview.md‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,6 @@ position: 0
1212

1313
The Scheduler component provides several different modes of display to fit different user preferences and needs.
1414

15-
In this article:
16-
17-
* [Define Available Views](#define-available-views)
18-
* [Common View Properties](#common-view-properties)
19-
* [Slots](#slots)
20-
21-
22-
## Define Available Views
23-
2415
You can choose which views the user can switch between. To do that, declare the desired views in the `SchedulerViews` tag (conditional markup is allowed).
2516

2617
You can also control which is the default one through the `View` parameter. You should usually use it in the `@bind-View` syntax to prevent it from resetting to its initial view when re-rendering happens.
@@ -71,7 +62,7 @@ The available views are:
7162
new SchedulerAppointment
7263
{
7364
Title = "Planning meeting",
74-
Description = "The cat needs vaccinations and her teeth checked.",
65+
Description = "Kick off the new project.",
7566
StartTime = new DateTime(2019, 11, 25, 9, 30, 0),
7667
EndTime = new DateTime(2019, 11, 25, 12, 45, 0)
7768
},
@@ -98,31 +89,6 @@ The available views are:
9889
````
9990

10091

101-
## Common View Properties
102-
103-
Generally, the views are designed around the timeframe that they show and they share some common properties that you will likely have to set to provide a good user experience for the user:
104-
105-
* `StartTime` - this is the first hour that is shown in the view. Defaults to midnight, so if you do not set it to a value close to the start of the working day, the user is likely to see blank spaces only before they scroll.
106-
107-
* `WorkDayStart` - this is when the working day starts. The work hours have a different background than non-working hours so the user can distinguish them easily. This parameter also influences the "Show Business Hours" toggle.
108-
109-
* `EndTime` - the counterpart to `StartTime` - defines when the full day ends. Defaults to midnight. If you have the day end earlier you can reduce the amount of elements that render, but the user may not see all late appointments.
110-
111-
* `WorkDayStart` - the counterpart to `WorkDayStart` - defines when the working day ends.
112-
113-
If there are appointments outside of the defined visible time the user will not be able to see them. For most cases where the working day is subject to scheduling this may not be a problem, but if your users need to manage night shifts or irregular work hours, you may want to have a longer day rendered, or to bind the value to a time picker so the user can alter it themselves.
114-
115-
### Slots
116-
117-
Views that show hours let you control their precision through the `SlotDuration` and `SlotDivisions` parameters:
118-
119-
1. `SlotDuration` - the time between the hour markers.
120-
1. `SlotDivisions` - how many partitions each time between the hour markers is separated into.
121-
122-
>caption Figure: Slots explanation
123-
124-
![](images/slot-example.png)
125-
12692

12793

12894
## See Also

0 commit comments

Comments
 (0)