From 15622ca5cb3f2d05be56117adf24533518c138e1 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 17 Oct 2022 20:09:25 +0300 Subject: [PATCH 1/5] docs(scheduler): OnCellRender event - draft --- components/scheduler/events.md | 93 ++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) diff --git a/components/scheduler/events.md b/components/scheduler/events.md index c4a5e82453..53cfc38730 100644 --- a/components/scheduler/events.md +++ b/components/scheduler/events.md @@ -18,6 +18,7 @@ This article explains the events available in the Telerik Scheduler for Blazor: * [OnItemDoubleClick](#onitemdoubleclick) * [OnItemContextMenu](#onitemcontextmenu) * [ItemRender](#itemrender) +* [OnCellRender](#oncellrender) * [DateChanged](#datechanged) * [ViewChanged](#viewchanged) @@ -939,6 +940,98 @@ Through its event arguments you can get the `Item` to cast it to your model type ```` +## OnCellRender + +The `OnCellRender` event fires upon rendering of each slot cell. It allows you set custom CSS class to the cells based on the business logic. + +The handler receives an argument of type `SchedulerCellRenderEventArgs` which exposes the following fields: + +| Field | Type | Description | +| --- | --- | --- | +| `Class` | `string` | the CSS class that will be applied to the cells. The CSS rules that are set for that class will be visibly rendered on the Scheduler cells. | +| `Date` | `DateTime` | The actual date that is associated with the cell. | +| `IsAllDay` | `bool` | Whether the slot is inside the `AllDay` row/column. +| `Resources` | `List` | +| `SlotStartTime` | `DateTime` | The slot start time. The date will be 1/1/1900, but the essential part is the time portion. | +| `SlotStartTime` | `DateTime` | The slot start time. The date will be 1/1/1900, but the essential part is the time portion. | + + +````CSHTML + + + + + + + + + + + +@code { + private DateTime SchedulerStartDate { get; set; } = new DateTime(2022, 7, 25, 8, 0, 0); + + private SchedulerView SchedulerCurrentView { get; set; } = SchedulerView.Week; + + void OnCellRenderHandler(SchedulerCellRenderEventArgs args) + { + DateTime lunchStart = new DateTime(1900, 1, 1, 12, 0, 0); + DateTime lunchEnd = new DateTime(1900, 1, 1, 13, 0, 0); + + if (args.SlotStartTime.Equals(lunchStart) || + args.SlotEndTime.Equals(lunchEnd)) + { + args.Class = "lunch-break"; + } + } + + // only the time portion matters + private DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0); + private DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 19, 0, 0); + + private List Appointments = new List() + { + new SchedulerAppointment + { + Title = "Planning meeting", + Start = new DateTime(2022, 7, 25, 9, 30, 0), + End = new DateTime(2022, 7, 25, 12, 0, 0) + }, + new SchedulerAppointment + { + Title = "Vet visit", + Start = new DateTime(2022, 7, 26, 7, 0, 0), + End = new DateTime(2022, 7, 26, 7, 30, 0) + }, + new SchedulerAppointment + { + Title = "Trip to Hawaii", + IsAllDay = true, + Start = new DateTime(2022, 7, 27), + End = new DateTime(2022, 8, 07) + } + }; + + public class SchedulerAppointment + { + public string Title { get; set; } + public DateTime Start { get; set; } + public DateTime End { get; set; } + public bool IsAllDay { get; set; } + } +} +```` ## DateChanged From cd288279e313ef8e9510ca4290134f8c00e24fdf Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 18 Oct 2022 18:48:33 +0300 Subject: [PATCH 2/5] docs(scheduler):fixes --- components/scheduler/events.md | 50 ++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/components/scheduler/events.md b/components/scheduler/events.md index 53cfc38730..6b18f5e4ef 100644 --- a/components/scheduler/events.md +++ b/components/scheduler/events.md @@ -946,20 +946,22 @@ The `OnCellRender` event fires upon rendering of each slot cell. It allows you s The handler receives an argument of type `SchedulerCellRenderEventArgs` which exposes the following fields: +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + | Field | Type | Description | | --- | --- | --- | -| `Class` | `string` | the CSS class that will be applied to the cells. The CSS rules that are set for that class will be visibly rendered on the Scheduler cells. | +| `Class` | `string` | The CSS class that will be applied to the cells. The CSS rules that are set for that class will be visibly rendered on the Scheduler cells. | | `Date` | `DateTime` | The actual date that is associated with the cell. | | `IsAllDay` | `bool` | Whether the slot is inside the `AllDay` row/column. -| `Resources` | `List` | -| `SlotStartTime` | `DateTime` | The slot start time. The date will be 1/1/1900, but the essential part is the time portion. | -| `SlotStartTime` | `DateTime` | The slot start time. The date will be 1/1/1900, but the essential part is the time portion. | +| `Resources` | `List` | The resources that are associated with the column/row. Applicable when the Scheduler uses both - [resources]({%slug scheduler-resources%}) and [grouping]({%slug scheduler-resource-grouping%}). Needed to differentiate between the same dates within different groups. | +| `SlotStartTime` | `DateTime` | The slot start time. The date is 1/1/1900, but the essential part is the time portion. | +| `SlotEndTime` | `DateTime` | The slot end time. The date is 1/1/1900, but the essential part is the time portion. | ````CSHTML + Height="600px"> - @@ -984,41 +986,47 @@ The handler receives an argument of type `SchedulerCellRenderEventArgs` which ex private SchedulerView SchedulerCurrentView { get; set; } = SchedulerView.Week; - void OnCellRenderHandler(SchedulerCellRenderEventArgs args) + // only the time portion matters + private DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0); + private DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 19, 0, 0); + + private void OnCellRenderHandler(SchedulerCellRenderEventArgs args) { DateTime lunchStart = new DateTime(1900, 1, 1, 12, 0, 0); - DateTime lunchEnd = new DateTime(1900, 1, 1, 13, 0, 0); + DateTime lunchEnd = new DateTime(1900, 1, 1, 12, 30, 0); - if (args.SlotStartTime.Equals(lunchStart) || - args.SlotEndTime.Equals(lunchEnd)) + if ((args.SlotStartTime.Equals(lunchStart) || args.SlotEndTime.Equals(lunchEnd)) && + (args.Date.Value.DayOfWeek != DayOfWeek.Saturday && args.Date.Value.DayOfWeek != DayOfWeek.Sunday)) { args.Class = "lunch-break"; } } - // only the time portion matters - private DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0); - private DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 19, 0, 0); - private List Appointments = new List() { new SchedulerAppointment { Title = "Planning meeting", - Start = new DateTime(2022, 7, 25, 9, 30, 0), - End = new DateTime(2022, 7, 25, 12, 0, 0) + Start = new DateTime(2022, 7, 25, 9, 0, 0), + End = new DateTime(2022, 7, 25, 11, 30, 0) }, new SchedulerAppointment { - Title = "Vet visit", - Start = new DateTime(2022, 7, 26, 7, 0, 0), - End = new DateTime(2022, 7, 26, 7, 30, 0) + Title = "Software updates", + Start = new DateTime(2022, 7, 26, 13, 0, 0), + End = new DateTime(2022, 7, 26, 14, 30, 0) + }, + new SchedulerAppointment + { + Title = "Support meeting", + Start = new DateTime(2022, 7, 27, 8, 0, 0), + End = new DateTime(2022, 7, 27, 9, 30, 0) }, new SchedulerAppointment { Title = "Trip to Hawaii", IsAllDay = true, - Start = new DateTime(2022, 7, 27), + Start = new DateTime(2022, 7, 28), End = new DateTime(2022, 8, 07) } }; From 6c0c01b27299b399c3aa431d8df3d08c0532a896 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 28 Oct 2022 16:22:26 +0300 Subject: [PATCH 3/5] Update components/scheduler/events.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/scheduler/events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/scheduler/events.md b/components/scheduler/events.md index 6b18f5e4ef..1e5046965a 100644 --- a/components/scheduler/events.md +++ b/components/scheduler/events.md @@ -942,7 +942,7 @@ Through its event arguments you can get the `Item` to cast it to your model type ## OnCellRender -The `OnCellRender` event fires upon rendering of each slot cell. It allows you set custom CSS class to the cells based on the business logic. +The `OnCellRender` event fires upon rendering of each slot cell. It allows you to set a custom CSS class to the cell, based on business logic. The handler receives an argument of type `SchedulerCellRenderEventArgs` which exposes the following fields: From 4c88fe2690ecd758f8a3cfc44fac61189196577f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 28 Oct 2022 16:22:47 +0300 Subject: [PATCH 4/5] Update components/scheduler/events.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/scheduler/events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/scheduler/events.md b/components/scheduler/events.md index 1e5046965a..f2e62f4aee 100644 --- a/components/scheduler/events.md +++ b/components/scheduler/events.md @@ -950,7 +950,7 @@ The handler receives an argument of type `SchedulerCellRenderEventArgs` which ex | Field | Type | Description | | --- | --- | --- | -| `Class` | `string` | The CSS class that will be applied to the cells. The CSS rules that are set for that class will be visibly rendered on the Scheduler cells. | +| `Class` | `string` | The CSS class that will be applied to the cell. | | `Date` | `DateTime` | The actual date that is associated with the cell. | | `IsAllDay` | `bool` | Whether the slot is inside the `AllDay` row/column. | `Resources` | `List` | The resources that are associated with the column/row. Applicable when the Scheduler uses both - [resources]({%slug scheduler-resources%}) and [grouping]({%slug scheduler-resource-grouping%}). Needed to differentiate between the same dates within different groups. | From a6bfd54393575cbb4d59272448aca74317deca0c Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 28 Oct 2022 16:23:55 +0300 Subject: [PATCH 5/5] Update components/scheduler/events.md --- components/scheduler/events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/scheduler/events.md b/components/scheduler/events.md index f2e62f4aee..5c2e7a73c6 100644 --- a/components/scheduler/events.md +++ b/components/scheduler/events.md @@ -951,7 +951,7 @@ The handler receives an argument of type `SchedulerCellRenderEventArgs` which ex | Field | Type | Description | | --- | --- | --- | | `Class` | `string` | The CSS class that will be applied to the cell. | -| `Date` | `DateTime` | The actual date that is associated with the cell. | +| `Date` | `DateTime` | The date that is associated with the cell. | | `IsAllDay` | `bool` | Whether the slot is inside the `AllDay` row/column. | `Resources` | `List` | The resources that are associated with the column/row. Applicable when the Scheduler uses both - [resources]({%slug scheduler-resources%}) and [grouping]({%slug scheduler-resource-grouping%}). Needed to differentiate between the same dates within different groups. | | `SlotStartTime` | `DateTime` | The slot start time. The date is 1/1/1900, but the essential part is the time portion. |