diff --git a/components/scheduler/events.md b/components/scheduler/events.md index c4a5e82453..5c2e7a73c6 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,106 @@ 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 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: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Field | Type | Description | +| --- | --- | --- | +| `Class` | `string` | The CSS class that will be applied to 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. | +| `SlotEndTime` | `DateTime` | The slot end time. The date is 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; + + // 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, 12, 30, 0); + + 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"; + } + } + + private List Appointments = new List() + { + new SchedulerAppointment + { + Title = "Planning meeting", + Start = new DateTime(2022, 7, 25, 9, 0, 0), + End = new DateTime(2022, 7, 25, 11, 30, 0) + }, + new SchedulerAppointment + { + 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, 28), + 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