Skip to content

Commit 42acb2a

Browse files
chore(scheduler): simplify examples
1 parent 7bc5f7a commit 42acb2a

File tree

2 files changed

+70
-75
lines changed

2 files changed

+70
-75
lines changed

components/scheduler/events.md

Lines changed: 43 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,11 @@ The `DateChanged` event fires when the user [navigates]({%slug scheduler-navigat
3333
@result
3434
3535
<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))">
36+
Date="@StartDate" DateChanged="@DateChangedHandler">
4237
<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" />
38+
<SchedulerDayView StartTime="@DayStart" />
39+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="3" />
40+
<SchedulerWeekView StartTime="@DayStart" />
4641
</SchedulerViews>
4742
</TelerikScheduler>
4843
@@ -51,61 +46,62 @@ The `DateChanged` event fires when the user [navigates]({%slug scheduler-navigat
5146
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
5247
async Task DateChangedHandler(DateTime currDate)
5348
{
54-
result = $"The user went to a range that contains the {currStart.ToShortDateString()} date";
49+
result = $"The user went to a range that contains the {currDate.ToShortDateString()} date";
5550
5651
// update the model field the scheduler uses, otherwise it may revert
5752
// to the default/initial/previous value upon repainting
5853
StartDate = currDate;
5954
}
6055
6156
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);
57+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
6758
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
6859
{
6960
new SchedulerAppointment
7061
{
62+
Id = Guid.NewGuid(),
7163
Title = "Board meeting",
7264
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)
65+
Start = new DateTime(2019, 12, 5, 10, 00, 0),
66+
End = new DateTime(2019, 12, 5, 11, 30, 0)
7567
},
7668
7769
new SchedulerAppointment
7870
{
71+
Id = Guid.NewGuid(),
7972
Title = "Vet visit",
8073
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)
74+
Start = new DateTime(2019, 11, 29, 11, 30, 0),
75+
End = new DateTime(2019, 11, 29, 12, 0, 0)
8376
},
8477
8578
new SchedulerAppointment
8679
{
80+
Id = Guid.NewGuid(),
8781
Title = "Planning meeting",
8882
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)
83+
Start = new DateTime(2019, 12, 6, 9, 30, 0),
84+
End = new DateTime(2019, 12, 6, 12, 45, 0)
9185
},
9286
9387
new SchedulerAppointment
9488
{
89+
Id = Guid.NewGuid(),
9590
Title = "Trip to Hawaii",
9691
Description = "An unforgettable holiday!",
9792
IsAllDay = true,
98-
StartTime = new DateTime(2019, 11, 27),
99-
EndTime = new DateTime(2019, 12, 05)
93+
Start = new DateTime(2019, 11, 27),
94+
End = new DateTime(2019, 12, 05)
10095
}
10196
};
10297
10398
public class SchedulerAppointment
10499
{
100+
public Guid Id { get; set; }
105101
public string Title { get; set; }
106102
public string Description { get; set; }
107-
public DateTime StartTime { get; set; }
108-
public DateTime EndTime { get; set; }
103+
public DateTime Start { get; set; }
104+
public DateTime End { get; set; }
109105
public bool IsAllDay { get; set; }
110106
}
111107
}
@@ -128,22 +124,17 @@ The `ViewChanged` event fires when the user chooses a new [View]({%slug schedule
128124
@result
129125
130126
<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))">
127+
View="@CurrView" ViewChanged="@ViewChangedHandler">
137128
<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" />
129+
<SchedulerDayView StartTime="@DayStart" />
130+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="3" />
131+
<SchedulerWeekView StartTime="@DayStart" />
141132
</SchedulerViews>
142133
</TelerikScheduler>
143134
144135
@code {
145136
string result { get; set; }
146-
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
137+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
147138
async Task ViewChangedHandler(SchedulerView nextView)
148139
{
149140
result = $"The user went to the {nextView.ToString()} view on {DateTime.Now}";
@@ -153,54 +144,55 @@ The `ViewChanged` event fires when the user chooses a new [View]({%slug schedule
153144
CurrView = nextView;
154145
}
155146
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);
147+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
148+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
162149
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
163150
{
164151
new SchedulerAppointment
165152
{
153+
Id = Guid.NewGuid(),
166154
Title = "Board meeting",
167155
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)
156+
Start = new DateTime(2019, 12, 5, 10, 00, 0),
157+
End = new DateTime(2019, 12, 5, 11, 30, 0)
170158
},
171159
172160
new SchedulerAppointment
173161
{
162+
Id = Guid.NewGuid(),
174163
Title = "Vet visit",
175164
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)
165+
Start = new DateTime(2019, 11, 29, 11, 30, 0),
166+
End = new DateTime(2019, 11, 29, 12, 0, 0)
178167
},
179168
180169
new SchedulerAppointment
181170
{
171+
Id = Guid.NewGuid(),
182172
Title = "Planning meeting",
183173
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)
174+
Start = new DateTime(2019, 12, 6, 9, 30, 0),
175+
End = new DateTime(2019, 12, 6, 12, 45, 0)
186176
},
187177
188178
new SchedulerAppointment
189179
{
180+
Id = Guid.NewGuid(),
190181
Title = "Trip to Hawaii",
191182
Description = "An unforgettable holiday!",
192183
IsAllDay = true,
193-
StartTime = new DateTime(2019, 11, 27),
194-
EndTime = new DateTime(2019, 12, 05)
184+
Start = new DateTime(2019, 11, 27),
185+
End = new DateTime(2019, 12, 05)
195186
}
196187
};
197188
198189
public class SchedulerAppointment
199190
{
191+
public Guid Id { get; set; }
200192
public string Title { get; set; }
201193
public string Description { get; set; }
202-
public DateTime StartTime { get; set; }
203-
public DateTime EndTime { get; set; }
194+
public DateTime Start { get; set; }
195+
public DateTime End { get; set; }
204196
public bool IsAllDay { get; set; }
205197
}
206198
}

components/scheduler/navigation.md

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,65 +49,68 @@ Change current View:
4949
<TelerikDropDownList Data="@AvailableViews" @bind-Value="@CurrView" />
5050
5151
52-
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView"
53-
Height="600px"
54-
StartField="@(nameof(SchedulerAppointment.StartTime))"
55-
EndField="@(nameof(SchedulerAppointment.EndTime))"
56-
TitleField="@(nameof(SchedulerAppointment.Title))"
57-
DescriptionField="@(nameof(SchedulerAppointment.Description))"
58-
IsAllDayField="@(nameof(SchedulerAppointment.IsAllDay))">
52+
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px">
5953
<SchedulerViews>
60-
<SchedulerDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
61-
<SchedulerWeekView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
62-
<SchedulerMultiDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" NumberOfDays="10" />
54+
<SchedulerDayView StartTime="@DayStart" />
55+
<SchedulerWeekView StartTime="@DayStart" />
56+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
6357
</SchedulerViews>
6458
</TelerikScheduler>
6559
6660
@code {
67-
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
61+
public DateTime StartDate { get; set; } = new DateTime(2019, 12, 2);
6862
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
6963
public List<SchedulerView> AvailableViews { get; set; } = new List<SchedulerView>(Enum.GetValues(typeof(SchedulerView)).AsQueryable() as IEnumerable<SchedulerView>);
7064
7165
//sample data to get things shown
72-
//the time portions are important
73-
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
74-
public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);
75-
public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
76-
public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
66+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
7767
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
7868
{
7969
new SchedulerAppointment
8070
{
71+
Id = Guid.NewGuid(),
72+
Title = "Board meeting",
73+
Description = "Q4 is coming to a close, review the details.",
74+
Start = new DateTime(2019, 12, 5, 10, 00, 0),
75+
End = new DateTime(2019, 12, 5, 11, 30, 0)
76+
},
77+
78+
new SchedulerAppointment
79+
{
80+
Id = Guid.NewGuid(),
8181
Title = "Vet visit",
8282
Description = "The cat needs vaccinations and her teeth checked.",
83-
StartTime = new DateTime(2019, 11, 26, 11, 30, 0),
84-
EndTime = new DateTime(2019, 11, 26, 12, 0, 0)
83+
Start = new DateTime(2019, 12, 2, 11, 30, 0),
84+
End = new DateTime(2019, 12, 2, 12, 0, 0)
8585
},
8686
8787
new SchedulerAppointment
8888
{
89+
Id = Guid.NewGuid(),
8990
Title = "Planning meeting",
9091
Description = "Kick off the new project.",
91-
StartTime = new DateTime(2019, 11, 25, 9, 30, 0),
92-
EndTime = new DateTime(2019, 11, 25, 12, 45, 0)
92+
Start = new DateTime(2019, 12, 6, 9, 30, 0),
93+
End = new DateTime(2019, 12, 6, 12, 45, 0)
9394
},
9495
9596
new SchedulerAppointment
9697
{
98+
Id = Guid.NewGuid(),
9799
Title = "Trip to Hawaii",
98100
Description = "An unforgettable holiday!",
99101
IsAllDay = true,
100-
StartTime = new DateTime(2019, 11, 27),
101-
EndTime = new DateTime(2019, 12, 07)
102+
Start = new DateTime(2019, 11, 27),
103+
End = new DateTime(2019, 12, 05)
102104
}
103105
};
104106
105107
public class SchedulerAppointment
106108
{
109+
public Guid Id { get; set; }
107110
public string Title { get; set; }
108111
public string Description { get; set; }
109-
public DateTime StartTime { get; set; }
110-
public DateTime EndTime { get; set; }
112+
public DateTime Start { get; set; }
113+
public DateTime End { get; set; }
111114
public bool IsAllDay { get; set; }
112115
}
113116
}

0 commit comments

Comments
 (0)