chore(scheduler): simplify first look sample

Author: marin-bratanov

components/scheduler/appointments/overview.md

@@ -18,6 +18,7 @@ The appointment model needs to provide the fields from the list below that are u
 
 >caption Appointment fields
 
+* `Id` - (`Guid`) - the unique identifier for the appointment.
 * `Title` - (`string`) - this is what is shown in the main scheduler view so the user can identify the event.
 * `Start` - (`DateTime`) - the date and time at which the appointment starts.
 * `End` - (`DateTime`) - the date and time at which the appointment ends.

components/scheduler/images/scheduler-basic-screenshot.png

@@ -16,69 +16,63 @@ To use a Telerik Scheduler for Blazor
 
 1. Add the `TelerikScheduler` tag.
 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.
-1. Set the `TitleField`, `StartField`, `EndField`, `DescriptionField` and `IsAllDayField` properties to point to the corresponding names of the model.
-1. Define the Views the user can toggle between in the `SchedulerViews` collection. Optionally, set their settings such as days start and end.
+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.
 
 >caption Scheduler first look and main features
 
 ````CSHTML
-@* Fewer settings are required to get the component running, but you will usually have to set these for better UX *@
-
-<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" Height="600px" @bind-View="@CurrView"
-                  StartField="@(nameof(SchedulerAppointment.StartTime))"
-                  EndField="@(nameof(SchedulerAppointment.EndTime))"
-                  TitleField="@(nameof(SchedulerAppointment.Title))"
-                  DescriptionField="@(nameof(SchedulerAppointment.Description))"
-                  IsAllDayField="@(nameof(SchedulerAppointment.IsAllDay))">
+@* Fewer settings are required to get the component running, but you will usually have to set some for better UX *@
+
+<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
     <SchedulerViews>
-        <SchedulerDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
-        <SchedulerWeekView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" />
-        <SchedulerMultiDayView StartTime="@DayStart" EndTime="@DayEnd" WorkDayStart="@WorkDayStart" WorkDayEnd="@WorkDayEnd" NumberOfDays="10" />
+        <SchedulerDayView StartTime="@DayStart" />
+        <SchedulerWeekView StartTime="@DayStart" />
+        <SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
     </SchedulerViews>
 </TelerikScheduler>
 
 @code {
     public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
     public SchedulerView CurrView { get; set; } = SchedulerView.Week;
-    //the time portions are important
-    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
-    public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);
-    public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
-    public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
+    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
     List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
     {
             new SchedulerAppointment
             {
+                Id = Guid.NewGuid(),
                 Title = "Vet visit",
                 Description = "The cat needs vaccinations and her teeth checked.",
-                StartTime = new DateTime(2019, 11, 26, 11, 30, 0),
-                EndTime = new DateTime(2019, 11, 26, 12, 0, 0)
+                Start = new DateTime(2019, 11, 26, 11, 30, 0),
+                End = new DateTime(2019, 11, 26, 12, 0, 0)
             },
 
             new SchedulerAppointment
             {
+                Id = Guid.NewGuid(),
                 Title = "Planning meeting",
                 Description = "Kick off the new project.",
-                StartTime = new DateTime(2019, 11, 25, 9, 30, 0),
-                EndTime = new DateTime(2019, 11, 25, 12, 45, 0)
+                Start = new DateTime(2019, 11, 25, 9, 30, 0),
+                End = new DateTime(2019, 11, 25, 12, 45, 0)
             },
 
             new SchedulerAppointment
             {
+                Id = Guid.NewGuid(),
                 Title = "Trip to Hawaii",
                 Description = "An unforgettable holiday!",
                 IsAllDay = true,
-                StartTime = new DateTime(2019, 11, 27),
-                EndTime = new DateTime(2019, 12, 07)
+                Start = new DateTime(2019, 11, 27),
+                End = new DateTime(2019, 12, 07)
             }
     };
 
     public class SchedulerAppointment
     {
+        public Guid Id { get; set; }
         public string Title { get; set; }
         public string Description { get; set; }
-        public DateTime StartTime { get; set; }
-        public DateTime EndTime { get; set; }
+        public DateTime Start { get; set; }
+        public DateTime End { get; set; }
         public bool IsAllDay { get; set; }
     }
 }
@@ -108,6 +102,7 @@ The Scheduler is a generic component and its type is determined by the type of t
 
     public class SchedulerAppointment
     {
+        public Guid Id { get; set; }
         public string Title { get; set; }
         public string Description { get; set; }
         public DateTime StartTime { get; set; }