From 0d191bbaefd2b25d196f03b7ef5b379bf6ca8ad5 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Tue, 8 Nov 2022 14:35:04 +0200 Subject: [PATCH 1/3] docs(slot-templates): add the slot templates docs --- components/scheduler/templates/slot.md | 312 +++++++++++++++++++++++++ 1 file changed, 312 insertions(+) create mode 100644 components/scheduler/templates/slot.md diff --git a/components/scheduler/templates/slot.md b/components/scheduler/templates/slot.md new file mode 100644 index 0000000000..ee3908a45f --- /dev/null +++ b/components/scheduler/templates/slot.md @@ -0,0 +1,312 @@ +--- +title: Slot +page_title: Scheduler - Slot Templates +description: Use custom rendering for the slots in the Scheduler for Blazor. +slug: scheduler-templates-dateheader +tags: telerik,blazor,scheduler,templates,slot,alldayslot,dateheader +published: True +position: 15 +--- + +# Slot Templates + +You can use the `SlotTemplate` and the `AllDaySlotTemplate` to customize the rendering of the slots in the Scheduler. + +* [AllDaySlotTemplate](#alldayslottemplate) +* [SlotTemplate](#slottemplate) + +## AllDaySlotTemplate + +Use the `AllDaySlotTemplate` to provide a custom rendering for the cells in the Telerik Scheduler for Blazor that span across a full day. This template can be defined for the [day, multiday, and week Scheduler views]({%slug scheduler-views-overview%}). + +The `context` of the template is a `SchedulerAllDaySlotTemplateContext` object that contains: + +| Property | Type | Description | +| --- | --- | --- | +| `Start` | `DateTime` | The slot's start time. | +| `End` | `DateTime` | The slot's end time.| +| `Resources` | `List` | A collection of resources for which the slot is defined. The collection is populated when the [Resources]({%slug scheduler-resources%}) and [Resource Grouping]({%slug scheduler-resource-grouping%}) features are used. | + +## SlotTemplate + +Use the `SlotTemplate` to provide a custom rendering for the cells in the Telerik Scheduler for Blazor. This template can be defined for the [day, multiday, and week Scheduler views]({%slug scheduler-views-overview%}). + +The `context` of the template is a `SchedulerSlotTemplateContext` object that contains: + +| Property | Type | Description | +| --- | --- | --- | +| `Start` | `DateTime` | The slot's start time. | +| `End` | `DateTime` | The slot's end time.| +| `Resources` | `List` | A collection of resources for which the slot is defined. The collection is populated when the [Resources]({%slug scheduler-resources%}) and [Resource Grouping]({%slug scheduler-resource-grouping%}) features are used. | + +## Example + +````CSHMTL +@* Use the AllDaySlotTemplate and SlotTemplate *@ + + + +
S.Item: @(((Appointment)context).Title)
+ + +
S.AllDayItem: @(((Appointment)context).Title)
+ + + + + @if (context.Start.TimeOfDay >= ControlDate.TimeOfDay + && context.End.AddSeconds(-1).TimeOfDay <= ControlDate.AddHours(1).TimeOfDay) + { +
Lunch Break
+ } + + +
AllDay SlotTemplate
+ + +
V.Item: @(((Appointment)context).Title)
+ + + + + @if (context.Start.TimeOfDay >= ControlDate.TimeOfDay + && context.End.AddSeconds(-1).TimeOfDay <= ControlDate.AddHours(1).TimeOfDay) + { +
Lunch Break
+ } + + +
AllDay week SlotTemplate
+ + + + + @{ + var dayNumber = context.Start.Day; + + @context.Start.Day + + + if (context.Start.DayOfWeek == DayOfWeek.Saturday + || context.Start.DayOfWeek == DayOfWeek.Sunday) + { +
Free Weekend
+ } + } + + +
V.Item: @(((Appointment)context).Title)
+ + + + + @if (context.Start.Day % 2 == 0) + { +
Workout Day
+ } + else + { +
Rest Day
+ } + + +
V.Item: @(((Appointment)context).Title)
+ + + + +@code +{ + private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + private DateTime ControlDate { get; set; } = new DateTime(2000, 1, 1, 12, 0, 0); + private SchedulerView CurrView { get; set; } + List Data = new List(); + + protected override void OnInitialized() + { + Data = AppointmentService.GetAppointments(); + + base.OnInitialized(); + } + + private void UpdateAppointment(SchedulerUpdateEventArgs args) + { + Appointment item = (Appointment)args.Item; + + var matchingItem = Data.FirstOrDefault(a => a.Id == item.Id); + + if (matchingItem != null) + { + matchingItem.Title = item.Title; + matchingItem.Description = item.Description; + matchingItem.Start = item.Start; + matchingItem.End = item.End; + matchingItem.IsAllDay = item.IsAllDay; + } + } + + private void OnDateClick(int day) + { + var currentDate = DateTime.Now; + var navigateDate = new DateTime(currentDate.Year, currentDate.Month, day); + + CurrView = SchedulerView.Day; + SelectedDate = navigateDate; + } + + private void AddAppointment(SchedulerCreateEventArgs args) + { + Appointment item = args.Item as Appointment; + + Data.Add(item); + } + + private void DeleteAppointment(SchedulerDeleteEventArgs args) + { + Appointment item = (Appointment)args.Item; + + Data.Remove(item); + } + + private class AppointmentService + { + public static async Task> GetAppointmentsAsync() + { + await Task.Delay(100); + + return GetAppointments(); + } + + public static List GetAppointments() + { + List data = new List(); + DateTime baselineTime = GetStartTime(); + + data.Add(new Appointment + { + Title = "Vet visit", + Description = "The cat needs vaccinations and her teeth checked.", + Start = baselineTime.AddHours(2), + End = baselineTime.AddHours(2).AddMinutes(30) + }); + + data.Add(new Appointment + { + Title = "Trip to Hawaii", + Description = "An unforgettable holiday!", + IsAllDay = true, + Start = baselineTime.AddDays(-10), + End = baselineTime.AddDays(-2) + }); + + data.Add(new Appointment + { + Title = "Jane's birthday party", + Description = "Make sure to get her fresh flowers in addition to the gift.", + Start = baselineTime.AddDays(5).AddHours(10), + End = baselineTime.AddDays(5).AddHours(18), + }); + + data.Add(new Appointment + { + Title = "One-on-one with the manager", + Start = baselineTime.AddDays(2).AddHours(3).AddMinutes(30), + End = baselineTime.AddDays(2).AddHours(3).AddMinutes(45), + }); + + data.Add(new Appointment + { + Title = "Brunch with HR", + Description = "Performance evaluation of the new recruit.", + Start = baselineTime.AddDays(3).AddHours(3), + End = baselineTime.AddDays(3).AddHours(3).AddMinutes(45) + }); + + data.Add(new Appointment + { + Title = "Interview with new recruit", + Description = "See if John will be a suitable match for our team.", + Start = baselineTime.AddDays(3).AddHours(1).AddMinutes(30), + End = baselineTime.AddDays(3).AddHours(2).AddMinutes(30) + }); + + data.Add(new Appointment + { + Title = "Conference", + Description = "The big important work conference. Don't forget to practice your presentation.", + Start = baselineTime.AddDays(6), + End = baselineTime.AddDays(11), + IsAllDay = true + }); + + data.Add(new Appointment + { + Title = "New Project Kickoff", + Description = "Everyone assemble! We will also have clients on the call from a later time zone.", + Start = baselineTime.AddDays(3).AddHours(8).AddMinutes(30), + End = baselineTime.AddDays(3).AddHours(11).AddMinutes(30) + }); + + data.Add(new Appointment + { + Title = "Get photos", + Description = "Get the printed photos from last week's holiday. It's on the way from the vet to work.", + Start = baselineTime.AddHours(2).AddMinutes(15), + End = baselineTime.AddHours(2).AddMinutes(30) + }); + + var rng = new Random(); + var startDate = new DateTime(2019, 11, 10); + + + return data; + } + + public static DateTime GetStartTime() + { + DateTime dt = new DateTime(2019, 12, 11); + int daysSinceMonday = dt.DayOfWeek - DayOfWeek.Monday; + return new DateTime(dt.Year, dt.Month, dt.Day - daysSinceMonday, 8, 0, 0); + } + } + + private class Appointment + { + public Guid Id { get; set; } + + public string Title { get; set; } + + public DateTime Start { get; set; } + + public DateTime End { get; set; } + + public bool IsAllDay { get; set; } + + public string Description { get; set; } + + public string Room { get; set; } + + public string Manager { get; set; } + + public Appointment() + { + var rand = new Random(); + Id = Guid.NewGuid(); + Room = rand.Next(1, 3).ToString(); + Manager = rand.Next(1, 4).ToString(); + } + } +} +```` + +## See Also + + * [Live Demo: Scheduler Templates](https://demos.telerik.com/blazor-ui/scheduler/templates) + From 12578e607844109684218eac3aba0642094f91f9 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Tue, 8 Nov 2022 15:40:08 +0200 Subject: [PATCH 2/3] docs(slot-template): update the available views --- components/scheduler/templates/slot.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/scheduler/templates/slot.md b/components/scheduler/templates/slot.md index ee3908a45f..c18b4d1f0c 100644 --- a/components/scheduler/templates/slot.md +++ b/components/scheduler/templates/slot.md @@ -17,7 +17,7 @@ You can use the `SlotTemplate` and the `AllDaySlotTemplate` to customize the ren ## AllDaySlotTemplate -Use the `AllDaySlotTemplate` to provide a custom rendering for the cells in the Telerik Scheduler for Blazor that span across a full day. This template can be defined for the [day, multiday, and week Scheduler views]({%slug scheduler-views-overview%}). +Use the `AllDaySlotTemplate` to provide a custom rendering for the cells in the Telerik Scheduler for Blazor that span across a full day. This template can be defined for the [Day, Multiday, and Week Scheduler views]({%slug scheduler-views-overview%}). The `context` of the template is a `SchedulerAllDaySlotTemplateContext` object that contains: @@ -29,7 +29,7 @@ The `context` of the template is a `SchedulerAllDaySlotTemplateContext` object t ## SlotTemplate -Use the `SlotTemplate` to provide a custom rendering for the cells in the Telerik Scheduler for Blazor. This template can be defined for the [day, multiday, and week Scheduler views]({%slug scheduler-views-overview%}). +Use the `SlotTemplate` to provide a custom rendering for the cells in the Telerik Scheduler for Blazor. This template can be defined for the [Day, Multiday, Month, Timeline, and Week Scheduler views]({%slug scheduler-views-overview%}). The `context` of the template is a `SchedulerSlotTemplateContext` object that contains: From 6173450c529cd736ac91cfda6d370125e3d68335 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Tue, 8 Nov 2022 17:24:40 +0200 Subject: [PATCH 3/3] docs(slot): add a note --- components/scheduler/templates/slot.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/scheduler/templates/slot.md b/components/scheduler/templates/slot.md index c18b4d1f0c..4fba26d78f 100644 --- a/components/scheduler/templates/slot.md +++ b/components/scheduler/templates/slot.md @@ -39,6 +39,8 @@ The `context` of the template is a `SchedulerSlotTemplateContext` object that co | `End` | `DateTime` | The slot's end time.| | `Resources` | `List` | A collection of resources for which the slot is defined. The collection is populated when the [Resources]({%slug scheduler-resources%}) and [Resource Grouping]({%slug scheduler-resource-grouping%}) features are used. | +>note When you use the SlotTemplate in the Timeline Scheduler view, and the content of the template is not a plain string, you must add the `!k-pos-absolute` built-in class to the custom element. + ## Example ````CSHMTL