+ private List SchedulerData { get; set; } = new List();
+ private List SchedulerRooms { get; set; } = new List();
+ private List SchedulerManagers { get; set; } = new List();
-@code
-{
- public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
- List Data = new List();
- List SchedulerResources = new List();
- List SchedulerManagers = new List();
- List SchedulerDirectors = new List();
+ private List GroupingResources => GroupByManager && GroupByRoom ?
+ new List { nameof(Appointment.Room), nameof(Appointment.Manager) } :
+ GroupByManager ?
+ new List { nameof(Appointment.Manager) } :
+ GroupByRoom ?
+ new List { nameof(Appointment.Room) } :
+ new List();
- List GroupingResources = new List { "Room", "Manager" };
+ private bool GroupByManager { get; set; }
+ private bool GroupByRoom { get; set; } = true;
- protected override async Task OnInitializedAsync()
+ private void OnSchedulerUpdate(SchedulerUpdateEventArgs args)
{
- SchedulerDirectors = await resourceService.GetDirectorsAsync();
- SchedulerResources = await resourceService.GetResourcesAsync();
- SchedulerManagers = await resourceService.GetManagersAsync();
- Data = await appointmentService.GetAppointmentsAsync();
- }
-
- 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;
- matchingItem.Room = item.Room;
- matchingItem.Manager = item.Manager;
+ Appointment itemToUpdate = (Appointment)args.Item;
+ Appointment? originalItem = SchedulerData.Find(a => a.Id == itemToUpdate.Id);
+
+ if (originalItem is not null)
+ {
+ originalItem.Title = itemToUpdate.Title;
+ originalItem.Description = itemToUpdate.Description;
+ originalItem.Start = itemToUpdate.Start;
+ originalItem.End = itemToUpdate.End;
+ originalItem.IsAllDay = itemToUpdate.IsAllDay;
+ originalItem.Room = itemToUpdate.Room;
+ originalItem.Manager = itemToUpdate.Manager;
}
}
- void AddAppointment(SchedulerCreateEventArgs args)
- {
- Appointment item = args.Item as Appointment;
-
- Data.Add(item);
- }
-
- void DeleteAppointment(SchedulerDeleteEventArgs args)
- {
- Appointment item = (Appointment)args.Item;
-
- Data.Remove(item);
- }
-}
-````
-````C# AppointmentService.cs
-using System;
-using System.Collections.Generic;
-using System.Threading.Tasks;
-
-public class AppointmentService
-{
- public async Task> GetAppointmentsAsync()
- {
- await Task.Delay(0);
-
- return GetAppointments();
- }
-
- public List GetAppointments()
+ private void OnSchedulerCreate(SchedulerCreateEventArgs args)
{
- 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);
-
- data.Add(new Appointment()
- {
- Title = "AllDay 1.0-1.0",
- Start = startDate.AddDays(5),
- End = startDate.AddDays(5),
- IsAllDay = true
- });
- data.Add(new Appointment()
- {
- Title = "AllDay 1.2-1.2",
- Start = startDate.AddDays(5).AddHours(2),
- End = startDate.AddDays(5).AddHours(2),
- IsAllDay = true
- });
- data.Add(new Appointment()
- {
- Title = "AllDay 1.0-2.0",
- Start = startDate.AddDays(5),
- End = startDate.AddDays(6),
- IsAllDay = true
- });
- data.Add(new Appointment()
- {
- Title = "S AllDay",
- Start = startDate,
- End = startDate.AddDays(1)
- });
- data.Add(new Appointment()
- {
- Title = "S AllDay 2",
- Start = startDate,
- End = startDate.AddDays(1)
- });
- data.Add(new Appointment()
- {
- Title = "S AllDay 3",
- Start = startDate.AddDays(-1),
- End = startDate.AddDays(1)
- });
- data.Add(new Appointment()
- {
- Title = "S AllDay 4",
- Start = startDate.AddDays(1),
- End = startDate.AddDays(2)
- });
- data.Add(new Appointment()
- {
- Title = "S AllDay span 3",
- Start = startDate.AddDays(1),
- End = startDate.AddDays(4)
- });
- data.Add(new Appointment()
- {
- Title = "At Start",
- Start = startDate,
- End = startDate.AddHours(1)
- });
- data.Add(new Appointment()
- {
- Title = "Middle",
- Start = startDate.AddHours(9),
- End = startDate.AddHours(10)
- });
- data.Add(new Appointment()
- {
- Title = "Before Start",
- Start = startDate.AddDays(1).AddHours(5),
- End = startDate.AddDays(1).AddHours(10)
- });
- data.Add(new Appointment()
- {
- Title = "After End",
- Start = startDate.AddHours(16),
- End = startDate.AddHours(19)
- });
- data.Add(new Appointment()
- {
- Title = "Two Day",
- Start = startDate.AddDays(1).AddHours(22),
- End = startDate.AddDays(2).AddHours(3)
- });
- data.Add(new Appointment()
- {
- Title = "Three Day",
- Start = startDate.AddDays(2).AddHours(4),
- End = startDate.AddDays(5).AddHours(23)
- });
- data.Add(new Appointment()
- {
- Title = "Not exact",
- Start = startDate.AddDays(5).AddHours(8).AddMinutes(11),
- End = startDate.AddDays(5).AddHours(9).AddMinutes(11)
- });
- data.Add(new Appointment()
- {
- Title = "Not exact end",
- Start = startDate.AddDays(5).AddHours(10),
- End = startDate.AddDays(5).AddHours(10).AddMinutes(11)
- });
- data.Add(new Appointment()
- {
- Title = "Not exact start",
- Start = startDate.AddDays(5).AddHours(12).AddMinutes(11),
- End = startDate.AddDays(5).AddHours(13)
- });
- data.Add(new Appointment()
- {
- Title = "At End",
- Start = startDate.AddDays(6).AddHours(23),
- End = startDate.AddDays(6).AddHours(24)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 1",
- Start = startDate.AddDays(2).AddHours(9),
- End = startDate.AddDays(2).AddHours(12)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 2",
- Start = startDate.AddDays(2).AddHours(10),
- End = startDate.AddDays(2).AddHours(11)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 2",
- Start = startDate.AddDays(2).AddHours(11),
- End = startDate.AddDays(2).AddHours(12)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 2",
- Start = startDate.AddDays(2).AddHours(11),
- End = startDate.AddDays(2).AddHours(12)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 11",
- Start = startDate.AddDays(3).AddHours(9),
- End = startDate.AddDays(3).AddHours(12)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 12",
- Start = startDate.AddDays(3).AddHours(9),
- End = startDate.AddDays(3).AddHours(10)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 13",
- Start = startDate.AddDays(3).AddHours(9),
- End = startDate.AddDays(3).AddHours(11)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 14",
- Start = startDate.AddDays(3).AddHours(11).AddMinutes(30),
- End = startDate.AddDays(3).AddHours(13)
- });
- data.Add(new Appointment()
- {
- Title = "Same Slot 15",
- Start = startDate.AddDays(3).AddHours(11),
- End = startDate.AddDays(3).AddHours(12)
- });
-
+ Appointment itemToCreate = (Appointment)args.Item;
- return data;
+ SchedulerData.Add(itemToCreate);
}
- public DateTime GetStartTime()
+ private void OnSchedulerDelete(SchedulerDeleteEventArgs args)
{
- DateTime dt = new DateTime(2019, 12, 11);
- int daysSinceMonday = dt.DayOfWeek - DayOfWeek.Monday;
+ Appointment itemToDelete = (Appointment)args.Item;
- return new DateTime(dt.Year, dt.Month, dt.Day - daysSinceMonday, 8, 0, 0);
+ SchedulerData.Remove(itemToDelete);
}
-}
-````
-````C# ResourceService.cs
-using System.Collections.Generic;
-using System.Threading.Tasks;
-public class ResourceService
-{
- public async Task> GetResourcesAsync()
+ protected override async Task OnInitializedAsync()
{
- await Task.Delay(0);
+ SchedulerRooms = await resourceService.GetRoomsAsync();
+ SchedulerManagers = await resourceService.GetManagersAsync();
+ SchedulerData = await appointmentService.GetAppointmentsAsync();
- return GetResources();
+ SchedulerDate = appointmentService.GetStartTime().Date;
}
- public List GetResources()
+ public class AppointmentService
{
- List result = new List();
+ public async Task> GetAppointmentsAsync()
+ {
+ await Task.Delay(100);
+
+ List data = new List();
+ DateTime baselineTime = GetStartTime();
+
+ data.Add(new Appointment
+ {
+ Title = "Weekly Monday Sync",
+ Description = "Planning sync",
+ Start = baselineTime.AddHours(0),
+ End = baselineTime.AddHours(0).AddMinutes(30),
+ Room = "1",
+ Manager = "1"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Cross-team meeting",
+ Description = "Product and design sync",
+ Start = baselineTime.AddHours(1),
+ End = baselineTime.AddHours(2),
+ Room = "2",
+ Manager = "2"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Support Meeting",
+ Description = "Discuss feature requests, bugs, tickets",
+ Start = baselineTime.AddHours(3),
+ End = baselineTime.AddHours(3).AddMinutes(30),
+ Room = "1",
+ Manager = "2"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Table Tennis",
+ Description = "Sports and fun",
+ Start = baselineTime.AddHours(4),
+ End = baselineTime.AddHours(4).AddMinutes(30),
+ Room = "2",
+ Manager = "1"
+ });
+ data.Add(new Appointment
+ {
+ Title = "One-on-one with the manager",
+ Start = baselineTime.AddHours(5),
+ End = baselineTime.AddHours(5).AddMinutes(30),
+ Room = "1",
+ Manager = "1"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Cheer the wins",
+ Description = "Recap and snacks",
+ Start = baselineTime.AddHours(6),
+ End = baselineTime.AddHours(7),
+ Room = "2",
+ Manager = "2"
+ });
+
+ return data;
+ }
- result.Add(new Resource()
- {
- Text = "None",
- Value = "",
- Color = ""
- });
- result.Add(new Resource()
+ public DateTime GetStartTime()
{
- Text = "Small meeting room",
- Value = "1",
- Color = "#66ccff"
- });
- result.Add(new Resource()
- {
- Text = "Big meeting room",
- Value = "2",
- Color = "#0066ff"
- });
-
- return result;
- }
+ DateTime today = DateTime.Today;
+ int daysSinceMonday = today.DayOfWeek - DayOfWeek.Monday;
- public async Task> GetManagersAsync()
- {
- await Task.Delay(0);
-
- return GetManagers();
+ return new DateTime(today.Year, today.Month, today.Day, 10, 0, 0).AddDays(-daysSinceMonday);
+ }
}
- public List GetManagers()
+ public class ResourceService
{
- List result = new List();
+ public async Task> GetRoomsAsync()
+ {
+ await Task.Delay(100);
+
+ List result = new List();
+
+ result.Add(new Resource()
+ {
+ Text = "Small Room",
+ Value = "1",
+ Color = "var(--kendo-color-success-subtle)"
+ });
+ result.Add(new Resource()
+ {
+ Text = "Big Room",
+ Value = "2",
+ Color = "var(--kendo-color-info-subtle)"
+ });
+
+ return result;
+ }
- result.Add(new Resource()
+ public async Task> GetManagersAsync()
{
- Text = "Alex",
- Value = "1",
- Color = "#99ffcc"
- });
- result.Add(new Resource()
- {
- Text = "Bob",
- Value = "2",
- Color = "#47d147"
- });
- result.Add(new Resource()
- {
- Text = "Charlie",
- Value = "3",
- Color = "#336600"
- });
+ await Task.Delay(100);
- return result;
- }
+ List result = new List();
- public async Task> GetDirectorsAsync()
- {
- await Task.Delay(0);
+ result.Add(new Resource()
+ {
+ Text = "Alex",
+ Value = "1",
+ Color = "var(--kendo-color-warning-subtle)"
+ });
+ result.Add(new Resource()
+ {
+ Text = "Bob",
+ Value = "2",
+ Color = "var(--kendo-color-error-subtle)"
+ });
- return GetDirectors();
+ return result;
+ }
}
- public List GetDirectors()
+ public class Appointment
{
- List result = new List();
-
- result.Add(new Resource()
- {
- Text = "Mr. Director",
- Value = "1",
- Color = ""
- });
- result.Add(new Resource()
- {
- Text = "Mrs. Director",
- Value = "2",
- Color = ""
- });
-
- return result;
+ public Guid Id { get; set; } = Guid.NewGuid();
+ public string Title { get; set; } = string.Empty;
+ public DateTime Start { get; set; }
+ public DateTime End { get; set; }
+ public bool IsAllDay { get; set; }
+ public string Description { get; set; } = string.Empty;
+ public string Room { get; set; } = string.Empty;
+ public string Manager { get; set; } = string.Empty;
}
-}
-````
-````C# Resource.cs
-public class Resource
-{
- public string Text { get; set; }
-
- public string Value { get; set; }
-
- public string Color { get; set; }
-}
-````
-````C# Appointment.cs
-using System;
-
-public 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()
+ public class Resource
{
- var rand = new Random();
- Id = Guid.NewGuid();
- Room = rand.Next(1, 3).ToString();
- Manager = rand.Next(1, 4).ToString();
+ public string Text { get; set; } = string.Empty;
+ public string Value { get; set; } = string.Empty;
+ public string Color { get; set; } = string.Empty;
}
}
````
diff --git a/components/scheduler/resources.md b/components/scheduler/resources.md
index 0f94b6cd0f..e252df53f4 100644
--- a/components/scheduler/resources.md
+++ b/components/scheduler/resources.md
@@ -45,6 +45,8 @@ To use resources:
1. Populate the appointment field that matches the resource name with the corresponding `Value` of the resource that you want associated with it.
* If you don't want any resource in the appointment, define a resource with empty strings in its `Value` and `Color` fields, and a suitable `Text`.
+If an appointment has multiple resources, the color of the first resource in `` takes precedence.
+
>tip To style the appointments, you can also use their [template](slug:scheduler-templates-appointment) and the [ItemRender event](slug:scheduler-events#itemrender).
## Examples
From 045561200f0e85b8af3a34698bdf8adfb1ed0748 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Wed, 29 Jul 2026 17:35:28 +0300
Subject: [PATCH 2/3] Continued
---
components/scheduler/resources.md | 10 +---------
1 file changed, 1 insertion(+), 9 deletions(-)
diff --git a/components/scheduler/resources.md b/components/scheduler/resources.md
index e252df53f4..e26bfe9f17 100644
--- a/components/scheduler/resources.md
+++ b/components/scheduler/resources.md
@@ -11,15 +11,7 @@ components: ["scheduler"]
# Scheduler Resources
-The Scheduler lets you associate appointments with a shared resource (such as meeting rooms, people, pieces of equipment) and shows the appointment in the corresponding color. You can also use resources to separate events into different calendars (e.g., work and personal events) through their colors.
-
-This article contains the following sections
-
-* [Basics](#basics)
-* [Define Resources](#define-resources)
-* [Examples](#examples)
- * [One Resource](#one-resource)
- * [Multiple Resources](#multiple-resources)
+The Scheduler lets you associate appointments with a shared resource (such as meeting room, person, equipment) and display the appointments in color that corresponds to the related resource. This article describes how to set up the Scheduler and its data to work with resources.
## Basics
From 9cc88f774417d9d657403a4a43e58f1882ad95de Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 30 Jul 2026 17:02:31 +0300
Subject: [PATCH 3/3] Continued
---
components/scheduler/events.md | 4 +-
components/scheduler/overview.md | 2 +-
components/scheduler/resource-grouping.md | 158 ++---
components/scheduler/resources.md | 605 ++++++++----------
components/scheduler/templates/appointment.md | 2 +-
...ally-disable-drag-for-some-appointments.md | 2 +-
.../scheduler-many-colors-for-appointments.md | 2 +-
7 files changed, 352 insertions(+), 423 deletions(-)
diff --git a/components/scheduler/events.md b/components/scheduler/events.md
index 60a36e8e15..df273c7a2d 100644
--- a/components/scheduler/events.md
+++ b/components/scheduler/events.md
@@ -18,7 +18,7 @@ This article explains the events available in the Telerik Scheduler for Blazor:
* [OnItemClick](#onitemclick)
* [OnItemDoubleClick](#onitemdoubleclick)
* [OnItemContextMenu](#onitemcontextmenu)
-* [ItemRender](#itemrender)
+* [OnItemRender](#onitemrender)
* [OnCellRender](#oncellrender)
* [DateChanged](#datechanged)
* [ViewChanged](#viewchanged)
@@ -835,7 +835,7 @@ It provides a `SchedulerItemContextMenuEventArgs` object to the event handler an
}
````
-## ItemRender
+## OnItemRender
The `OnItemRender` event fires when an appointment is going to be rendered in the scheduler. It fires one for every appointment, including all-day appointments that span several days/slots, and the class is rendered on all elements.
diff --git a/components/scheduler/overview.md b/components/scheduler/overview.md
index caf8cf027a..8d1b6ac803 100644
--- a/components/scheduler/overview.md
+++ b/components/scheduler/overview.md
@@ -118,7 +118,7 @@ The Scheduler can display and edit [recurring appointments and recurrence except
## Templates
-You can [customize the appointment appearance and content via Scheduler templates](slug:scheduler-templates-appointment). Another option is to use the [Scheduler `OnItemRender` event](slug:scheduler-events#itemrender).
+You can [customize the appointment appearance and content via Scheduler templates](slug:scheduler-templates-appointment). Another option is to use the [Scheduler `OnItemRender` event](slug:scheduler-events#onitemrender).
## Events
diff --git a/components/scheduler/resource-grouping.md b/components/scheduler/resource-grouping.md
index 352b841ffd..21240a005b 100644
--- a/components/scheduler/resource-grouping.md
+++ b/components/scheduler/resource-grouping.md
@@ -17,29 +17,29 @@ The Telerik Scheduler for Blazor can group appointments by one or more resources
## Basics
-When Scheduler grouping is active, the component renders multiple view tables in horizontal and vertical orientation. The date or hour headers repeat for each group.
+When Scheduler grouping is active, the component renders multiple view tables in horizontal and vertical orientation. The date or hour headers repeat for each group (resource value).
Moving an appointment from one group to another is allowed. On drop, the appointment resource changes alongside the start date and the app should persist these changes in the [`OnUpdate` event handler](slug:scheduler-appointments-edit).
-To configure group rendering, use the `` tag inside ``.
+To configure resource display in groups:
-The group settings tag exposes the following parameters:
-
-* `Resources` expects a `List` of one or more resource names that match property names in the Scheduler model class.
-* `Orientation` determines the orientation as an [`SchedulerGroupOrientation`](slug:telerik.blazor.schedulergrouporientation) enum. The default is `Horizontal`.
+1. [Configure the Scheduler component to work with resources](slug:scheduler-resources).
+1. Add the `` tag inside ``.
+1. Set the `Resources` parameter to a `List` of one or more resource names that match property names in the Scheduler model class.
+1. (optional) Set the `Orientation` parameter to a member of the [`SchedulerGroupOrientation`](slug:telerik.blazor.schedulergrouporientation) enum. The default value is `Horizontal`.
>caption Scheduler Group Settings
````RAZOR.skip-repl
-
+
@code {
- private readonly List GroupingResources = new()
+ private readonly List GroupResources = new()
{
nameof(Appointment.Room),
nameof(Appointment.Manager)
@@ -53,6 +53,8 @@ The group settings tag exposes the following parameters:
````RAZOR
+ Enable or disable single or multiple resource grouping:
+
+
+ Group orientation:
+
+
+
+ Height="70vh">
-
+
+
-
-
+
+
+
- @if (GroupByRoom)
- {
-
- }
- @if (GroupByManager)
- {
-
- }
+
+
@code {
- #nullable enable
-
- private AppointmentService appointmentService = new();
- private ResourceService resourceService = new();
-
+ private List SchedulerData { get; set; } = new List();
private DateTime SchedulerDate { get; set; } = DateTime.Today;
+ private SchedulerView SchedulerView { get; set; } = SchedulerView.Day;
private DateTime StartTime { get; set; } = DateTime.Today.AddHours(10);
private DateTime EndTime { get; set; } = DateTime.Today.AddHours(18);
- private SchedulerView SchedulerView { get; set; } = SchedulerView.Day;
+ private List Rooms { get; set; } = new List();
+ private List Managers { get; set; } = new List();
- private List SchedulerData { get; set; } = new List();
- private List SchedulerRooms { get; set; } = new List();
- private List SchedulerManagers { get; set; } = new List();
+ private bool GroupByRoom { get; set; } = true;
+ private bool GroupByManager { get; set; }
- private List GroupingResources => GroupByManager && GroupByRoom ?
+ private List GroupResources => GroupByManager && GroupByRoom ?
new List { nameof(Appointment.Room), nameof(Appointment.Manager) } :
GroupByManager ?
new List { nameof(Appointment.Manager) } :
@@ -123,8 +132,12 @@ The group settings tag exposes the following parameters:
new List { nameof(Appointment.Room) } :
new List();
- private bool GroupByManager { get; set; }
- private bool GroupByRoom { get; set; } = true;
+ private readonly List GroupOrientations = new()
+ {
+ SchedulerGroupOrientation.Horizontal,
+ SchedulerGroupOrientation.Vertical
+ };
+ private SchedulerGroupOrientation GroupOrientation { get; set; } = SchedulerGroupOrientation.Horizontal;
private void OnSchedulerUpdate(SchedulerUpdateEventArgs args)
{
@@ -150,46 +163,39 @@ The group settings tag exposes the following parameters:
SchedulerData.Add(itemToCreate);
}
- private void OnSchedulerDelete(SchedulerDeleteEventArgs args)
- {
- Appointment itemToDelete = (Appointment)args.Item;
-
- SchedulerData.Remove(itemToDelete);
- }
-
protected override async Task OnInitializedAsync()
{
- SchedulerRooms = await resourceService.GetRoomsAsync();
- SchedulerManagers = await resourceService.GetManagersAsync();
- SchedulerData = await appointmentService.GetAppointmentsAsync();
+ Rooms = await ResourceService.GetRoomsAsync();
+ Managers = await ResourceService.GetManagersAsync();
+ SchedulerData = await AppointmentService.GetAppointmentsAsync();
- SchedulerDate = appointmentService.GetStartTime().Date;
+ SchedulerDate = AppointmentService.GetStartDateTime().Date;
}
- public class AppointmentService
+ public static class AppointmentService
{
- public async Task> GetAppointmentsAsync()
+ public static async Task> GetAppointmentsAsync()
{
await Task.Delay(100);
List data = new List();
- DateTime baselineTime = GetStartTime();
+ DateTime baseDateTime = GetStartDateTime();
data.Add(new Appointment
{
Title = "Weekly Monday Sync",
Description = "Planning sync",
- Start = baselineTime.AddHours(0),
- End = baselineTime.AddHours(0).AddMinutes(30),
+ Start = baseDateTime.AddHours(0),
+ End = baseDateTime.AddHours(0).AddMinutes(30),
Room = "1",
Manager = "1"
});
data.Add(new Appointment
{
- Title = "Cross-team meeting",
+ Title = "Cross-Team Meeting",
Description = "Product and design sync",
- Start = baselineTime.AddHours(1),
- End = baselineTime.AddHours(2),
+ Start = baseDateTime.AddHours(1),
+ End = baseDateTime.AddHours(2),
Room = "2",
Manager = "2"
});
@@ -197,8 +203,8 @@ The group settings tag exposes the following parameters:
{
Title = "Support Meeting",
Description = "Discuss feature requests, bugs, tickets",
- Start = baselineTime.AddHours(3),
- End = baselineTime.AddHours(3).AddMinutes(30),
+ Start = baseDateTime.AddHours(3),
+ End = baseDateTime.AddHours(3).AddMinutes(30),
Room = "1",
Manager = "2"
});
@@ -206,25 +212,25 @@ The group settings tag exposes the following parameters:
{
Title = "Table Tennis",
Description = "Sports and fun",
- Start = baselineTime.AddHours(4),
- End = baselineTime.AddHours(4).AddMinutes(30),
+ Start = baseDateTime.AddHours(4),
+ End = baseDateTime.AddHours(4).AddMinutes(30),
Room = "2",
Manager = "1"
});
data.Add(new Appointment
{
- Title = "One-on-one with the manager",
- Start = baselineTime.AddHours(5),
- End = baselineTime.AddHours(5).AddMinutes(30),
+ Title = "Team Lead 1:1",
+ Start = baseDateTime.AddHours(5),
+ End = baseDateTime.AddHours(5).AddMinutes(30),
Room = "1",
Manager = "1"
});
data.Add(new Appointment
{
- Title = "Cheer the wins",
+ Title = "Cheer the Wins",
Description = "Recap and snacks",
- Start = baselineTime.AddHours(6),
- End = baselineTime.AddHours(7),
+ Start = baseDateTime.AddHours(6),
+ End = baseDateTime.AddHours(7),
Room = "2",
Manager = "2"
});
@@ -232,7 +238,7 @@ The group settings tag exposes the following parameters:
return data;
}
- public DateTime GetStartTime()
+ public static DateTime GetStartDateTime()
{
DateTime today = DateTime.Today;
int daysSinceMonday = today.DayOfWeek - DayOfWeek.Monday;
@@ -241,9 +247,9 @@ The group settings tag exposes the following parameters:
}
}
- public class ResourceService
+ public static class ResourceService
{
- public async Task> GetRoomsAsync()
+ public static async Task> GetRoomsAsync()
{
await Task.Delay(100);
@@ -265,7 +271,7 @@ The group settings tag exposes the following parameters:
return result;
}
- public async Task> GetManagersAsync()
+ public static async Task> GetManagersAsync()
{
await Task.Delay(100);
@@ -273,13 +279,13 @@ The group settings tag exposes the following parameters:
result.Add(new Resource()
{
- Text = "Alex",
+ Text = "Team Lead",
Value = "1",
Color = "var(--kendo-color-warning-subtle)"
});
result.Add(new Resource()
{
- Text = "Bob",
+ Text = "Senior Manager",
Value = "2",
Color = "var(--kendo-color-error-subtle)"
});
diff --git a/components/scheduler/resources.md b/components/scheduler/resources.md
index e26bfe9f17..f65f2cf6b6 100644
--- a/components/scheduler/resources.md
+++ b/components/scheduler/resources.md
@@ -11,404 +11,327 @@ components: ["scheduler"]
# Scheduler Resources
-The Scheduler lets you associate appointments with a shared resource (such as meeting room, person, equipment) and display the appointments in color that corresponds to the related resource. This article describes how to set up the Scheduler and its data to work with resources.
+The Scheduler lets you associate appointments with shared resources (such as meeting rooms, people, equipment) and display the appointments in the corresponding resource color. This article describes how to set up the Scheduler and its data to work with resources.
## Basics
-Resources are not required, so you can define no resources, one type of resource, or more than one type of resource.
-
-The color of the appointment is determined by the first matched resource, so the order in which you declare the collections of resources is important.
-
-If resources are used, all appointments must be associated with a resource, so if it is not required, you should add a "None" item to the resource list that will be the default, whose `Value` is an empty string and its color is also an empty string so the default theme color is used by the appointment.
-
-When the user opens an appointment for editing, they will have a dropdown for each type of resource so they can choose. The order of declaration of the resource types also determines the order in which their editors show up.
-
-## Define Resources
+Resources are optional. You can define no resources, one type of resource, or multiple types of resources. When the user opens an appointment for editing, they will have a DropDownList for each type of resource.
To use resources:
-1. Under the `SchedulerResources` tag, define a `SchedulerResource` for each type of resource you will be using.
- * Set its `Field` parameter to a string that will point to the name of the field in the appointment that associated appointments with the resource type.
- * The `Title` parameter defines the text shown for its dropdown in the [edit form](slug:scheduler-appointments-edit).
-1. Provide a collection of resource entries for each type of resource you will use to the `Data` parameter of the resource.
- * The `ColorField`, `ValueField` and `TextField` let you specify field names in the resource model that contain the data. These fields must all be of type `string`. The default values are `Value`, `Text`, `Color` respectively. If you use them, you don't need to explicitly specify them in the markup.
-1. Define appointments [as usual](slug:scheduler-appointments-databinding). Add a `string` field to them for each resources type they will require. The name of this field must match the value of the `Field` parameter of the resource declaration.
- * If you are using multiple resource types, you will need a field for each resource.
-1. Populate the appointment field that matches the resource name with the corresponding `Value` of the resource that you want associated with it.
- * If you don't want any resource in the appointment, define a resource with empty strings in its `Value` and `Color` fields, and a suitable `Text`.
-
-If an appointment has multiple resources, the color of the first resource in `` takes precedence.
-
->tip To style the appointments, you can also use their [template](slug:scheduler-templates-appointment) and the [ItemRender event](slug:scheduler-events#itemrender).
-
-## Examples
+1. Define a resource class with a name of your choice and `string` properties for the resource name, value, and color. The following snippet uses the default expected property names, which do not require additional Scheduler configuration (`Color`, `Text`, `Value`). You can also use custom names and specify them in each `` definition.
+ ````C#.skip-repl
+ public class Resource
+ {
+ public string Color { get; set; } = string.Empty;
+ public string Text { get; set; } = string.Empty;
+ public string Value { get; set; } = string.Empty;
+ }
+ ````
+1. Define one or more collections of resources.
+ ````C#.skip-repl
+ private List Rooms { get; set; } = new List()
+ {
+ new Resource()
+ {
+ Text = "Small Room",
+ Value = "1",
+ Color = "lime"
+ },
+ new Resource()
+ {
+ Text = "Big Room",
+ Value = "2",
+ Color = "orange"
+ }
+ };
+ ````
+1. Add a `string` property to the Scheduler model for each resource.
+ ````C#.skip-repl
+ public class Appointment
+ {
+ public string Room { get; set; } = string.Empty;
+ }
+ ````
+1. Add one `` tag for each resource type.
+ * Set the `Data` parameter to the resource collection of that type.
+ * Set the `Field` parameter to the property name for the same resource in the Scheduler model.
+ * If the resource class uses custom property names, specify them with the `ColorField`, `TextField`, and `ValueField` parameters.
+ ````RAZOR.skip-repl
+
+
+
+
+
+ ````
-The examples below showcase [single resource](#one-resource) and [multiple resources](#multiple-resources) respectively. For brevity, they use hardcoded data, but you can populate the corresponding collections dynamically from your actual data service, and you can also use `async` methods to do so (our [live demo](https://demos.telerik.com/blazor-ui/scheduler/resources) shows an example of that).
+The resource definition order in the `` collection matters:
->tip The examples below hardcode the resource collections for brevity. In a real case you might be fetching them from asynchronous API. If so, initialize the resource collections to avoid null references while the scheduler is initializing, something like `List Managers { get; set; } = new List();`.
+* It determines the order of the resource selection dropdowns in the [Scheduler edit form](slug:scheduler-appointments-edit).
+* The background color of each appointment depends on the first matched resource.
-### One Resource
+>tip Other ways to style the appointments are the [`ItemTemplate`](slug:scheduler-templates-appointment) and the [`OnItemRender` event](slug:scheduler-events#onitemrender).
-#### Single Resource type in the scheduler using the default fields for the resource model
+## Example
-The field names used for the resource model (`Text`, `Value` and `Color`) are the default ones, so you don't need to explicitly define them in the markup.
+>caption Using Scheduler resources with default property names
````RAZOR
-@* This example shows how to declare a resource and to match it to appointments, and how to have an appointment that is not associated with that resource.
- Actual CRUD operations are not implemented for brevity, just the UX is enabled so you can see how the edit form looks like.*@
-
-
-
-
-
+
+ Enable or disable resources to see their respective dropdowns in the popup edit form:
+
+
+
+
+
+
-
-
-
+
+
+
+
+
-
-
-
-
-
-@code {
- public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
- public SchedulerView CurrView { get; set; } = SchedulerView.Week;
- public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
- List Appointments = new List()
- {
- new SchedulerAppointment
- {
- ManagerName = "", //this appointment does not need a manager
- Title = "Vet visit",
- Description = "The cat needs vaccinations and her teeth checked.",
- Start = new DateTime(2019, 11, 26, 11, 30, 0),
- End = new DateTime(2019, 11, 26, 12, 0, 0)
- },
-
- new SchedulerAppointment
- {
- ManagerName = "1", // matches the Value field of the corresponding resource
- Title = "Planning meeting",
- Description = "Kick off the new project.",
- Start = new DateTime(2019, 11, 25, 9, 30, 0),
- End = new DateTime(2019, 11, 25, 12, 45, 0)
- },
-
- new SchedulerAppointment
- {
- ManagerName = "3",
- Title = "Board meeting",
- Description = "Q4 is coming to a close, review the details.",
- Start = new DateTime(2019, 11, 28, 10, 00, 0),
- End = new DateTime(2019, 11, 28, 11, 30, 0)
- },
- };
-
- List Managers { get; set; } = new List()
- {
- new Resource // empty resource for appointments that don't require one
- {
- Text = "Noone", // can say anything you like, it's just another resource entry
- Value = "",
- Color = ""
- },
-
- new Resource
- {
- Text = "Alex",
- Value = "1",
- Color = "purple"
- },
- new Resource
+
+ @if (EnableRoomResource)
{
- Text = "Bob",
- Value = "2",
- Color = "#51a0ed"
- },
- new Resource
+
+ }
+ @if (EnableManagerResource)
{
- Text = "Sarah",
- Value = "3",
- Color = "#56ca85"
+
}
- };
-
- public class Resource
- {
- // these are the default field names
- public string Text { get; set; }
- public string Value { get; set; }
- public string Color { get; set; } // must be a valid CSS string
- }
-
- public class SchedulerAppointment
- {
- public string ManagerName { get; set; } //field that matches the resource declaration Field
- public string Title { get; set; }
- public string Description { get; set; }
- public DateTime Start { get; set; }
- public DateTime End { get; set; }
- public bool IsAllDay { get; set; }
- }
-}
-````
-
-#### Single Resource type in the scheduler using different than the default fields for the resource model
-
-The field names used for the resource model (`Name`, `Id` and `Shade`) are different than the default ones, therefore should be specified in the markup, so that the `TextField`, `ValueField` and `ColorField` will point to them.
-
-````RAZOR
-
-@* This example shows how to declare a resource and to match it to appointments, and how to have an appointment that is not associated with that resource.
- Actual CRUD operations are not implemented for brevity, just the UX is enabled so you can see how the edit form looks like.*@
-
-
-
-
-
-
-
-
-
-
+
@code {
- public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
- public SchedulerView CurrView { get; set; } = SchedulerView.Week;
- public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
- List Appointments = new List()
- {
- new SchedulerAppointment
- {
- ManagerName = "", //this appointment does not need a manager
- Title = "Vet visit",
- Description = "The cat needs vaccinations and her teeth checked.",
- Start = new DateTime(2019, 11, 26, 11, 30, 0),
- End = new DateTime(2019, 11, 26, 12, 0, 0)
- },
-
- new SchedulerAppointment
- {
- ManagerName = "1", // matches the Value field of the corresponding resource
- Title = "Planning meeting",
- Description = "Kick off the new project.",
- Start = new DateTime(2019, 11, 25, 9, 30, 0),
- End = new DateTime(2019, 11, 25, 12, 45, 0)
- },
-
- new SchedulerAppointment
- {
- ManagerName = "3",
- Title = "Board meeting",
- Description = "Q4 is coming to a close, review the details.",
- Start = new DateTime(2019, 11, 28, 10, 00, 0),
- End = new DateTime(2019, 11, 28, 11, 30, 0)
- },
- };
-
- List Managers { get; set; } = new List()
+ private TelerikScheduler? SchedulerRef;
+
+ private List SchedulerData { get; set; } = new List();
+ private DateTime SchedulerDate { get; set; } = DateTime.Today;
+ private SchedulerView SchedulerView { get; set; } = SchedulerView.Day;
+ private DateTime StartTime { get; set; } = DateTime.Today.AddHours(10);
+ private DateTime EndTime { get; set; } = DateTime.Today.AddHours(18);
+ private List Rooms { get; set; } = new List();
+ private List Managers { get; set; } = new List();
+
+ private bool EnableRoomResource { get; set; } = true;
+ private bool EnableManagerResource { get; set; }
+
+ private void OnSchedulerUpdate(SchedulerUpdateEventArgs args)
{
- new Resource // empty resource for appointments that don't require one
- {
- Name = "Noone", // can say anything you like, it's just another resource entry
- Id = "",
- Shade = ""
- },
+ Appointment itemToUpdate = (Appointment)args.Item;
+ Appointment? originalItem = SchedulerData.Find(a => a.Id == itemToUpdate.Id);
- new Resource
+ if (originalItem is not null)
{
- Name = "Alex",
- Id = "1",
- Shade = "purple"
- },
- new Resource
- {
- Name = "Bob",
- Id = "2",
- Shade = "#51a0ed"
- },
- new Resource
- {
- Name = "Sarah",
- Id = "3",
- Shade = "#56ca85"
+ originalItem.Title = itemToUpdate.Title;
+ originalItem.Description = itemToUpdate.Description;
+ originalItem.Start = itemToUpdate.Start;
+ originalItem.End = itemToUpdate.End;
+ originalItem.IsAllDay = itemToUpdate.IsAllDay;
+ originalItem.Room = itemToUpdate.Room;
+ originalItem.Manager = itemToUpdate.Manager;
}
- };
-
- public class Resource
- {
- // these are the default field names
- public string Name { get; set; }
- public string Id { get; set; }
- public string Shade { get; set; } // must be a valid CSS string
}
- public class SchedulerAppointment
+ private void OnSchedulerCreate(SchedulerCreateEventArgs args)
{
- public string ManagerName { get; set; } //field that matches the resource declaration Field
- public string Title { get; set; }
- public string Description { get; set; }
- public DateTime Start { get; set; }
- public DateTime End { get; set; }
- public bool IsAllDay { get; set; }
- }
-}
-````
-
-### Multiple Resources
+ Appointment itemToCreate = (Appointment)args.Item;
->caption Declare multiple resources
-
-````RAZOR
-@* This example shows how to declare multiple resources and how their order is importnat when their are being matched with appointments, both for the edit form, and for the appointment color.
-Actual CRUD operations are not implemented for brevity, just the UX is enabled so you can see how the edit form looks like. *@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ SchedulerData.Add(itemToCreate);
+ }
-@code {
- public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
- public SchedulerView CurrView { get; set; } = SchedulerView.Week;
- public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
- List Appointments = new List()
+ protected override async Task OnInitializedAsync()
{
- new SchedulerAppointment
- {
- // this appointment does not need any resources
- ManagerName = "",
- RoomId = "",
-
- Title = "Vet visit",
- Description = "The cat needs vaccinations and her teeth checked.",
- Start = new DateTime(2019, 11, 26, 11, 30, 0),
- End = new DateTime(2019, 11, 26, 12, 0, 0)
- },
-
- new SchedulerAppointment
- {
- // matches the Value field of the corresponding resource
- ManagerName = "3",
- RoomId = "2",
-
- Title = "Planning meeting",
- Description = "Kick off the new project.",
- Start = new DateTime(2019, 11, 25, 9, 30, 0),
- End = new DateTime(2019, 11, 25, 12, 45, 0)
- },
-
- new SchedulerAppointment
- {
- ManagerName = "", // not all resources need to be matched or used
- RoomId = "1",
+ Rooms = await ResourceService.GetRoomsAsync();
+ Managers = await ResourceService.GetManagersAsync();
+ SchedulerData = await AppointmentService.GetAppointmentsAsync();
- Title = "Board meeting",
- Description = "Q4 is coming to a close, review the details.",
- Start = new DateTime(2019, 11, 28, 10, 00, 0),
- End = new DateTime(2019, 11, 28, 11, 30, 0)
- },
- };
+ SchedulerDate = AppointmentService.GetStartDateTime().Date;
+ }
- List Managers { get; set; } = new List()
+ public static class AppointmentService
{
- new Resource // empty resource for appointments that don't require one
+ public static async Task> GetAppointmentsAsync()
{
- Text = "Noone", // can say anything you like, it's just another resource entry
- Value = "",
- Color = ""
- },
+ await Task.Delay(100);
+
+ List data = new List();
+ DateTime baseDateTime = GetStartDateTime();
+
+ data.Add(new Appointment
+ {
+ Title = "Weekly Monday Sync",
+ Description = "Planning sync",
+ Start = baseDateTime.AddHours(0),
+ End = baseDateTime.AddHours(0).AddMinutes(30),
+ Room = "1",
+ Manager = "1"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Cross-Team Meeting",
+ Description = "Product and design sync",
+ Start = baseDateTime.AddHours(1),
+ End = baseDateTime.AddHours(2),
+ Room = "2",
+ Manager = "2"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Support Meeting",
+ Description = "Discuss feature requests, bugs, tickets",
+ Start = baseDateTime.AddHours(3),
+ End = baseDateTime.AddHours(3).AddMinutes(30),
+ Room = "1",
+ Manager = "2"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Table Tennis",
+ Description = "Sports and fun",
+ Start = baseDateTime.AddHours(4),
+ End = baseDateTime.AddHours(4).AddMinutes(30),
+ Room = "2",
+ Manager = "1"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Team Lead 1:1",
+ Start = baseDateTime.AddHours(5),
+ End = baseDateTime.AddHours(5).AddMinutes(30),
+ Room = "1",
+ Manager = "1"
+ });
+ data.Add(new Appointment
+ {
+ Title = "Cheer the Wins",
+ Description = "Recap and snacks",
+ Start = baseDateTime.AddHours(6),
+ End = baseDateTime.AddHours(7),
+ Room = "2",
+ Manager = "2"
+ });
+
+ return data;
+ }
- new Resource
- {
- Text = "Alex",
- Value = "1",
- Color = "purple"
- },
- new Resource
+ public static DateTime GetStartDateTime()
{
- Text = "Bob",
- Value = "2",
- Color = "#51a0ed"
- },
- new Resource
- {
- Text = "Sarah",
- Value = "3",
- Color = "#56ca85"
+ DateTime today = DateTime.Today;
+ int daysSinceMonday = today.DayOfWeek - DayOfWeek.Monday;
+
+ return new DateTime(today.Year, today.Month, today.Day, 10, 0, 0).AddDays(-daysSinceMonday);
}
- };
+ }
- List Rooms { get; set; } = new List()
+ public static class ResourceService
{
- new Resource // empty resource for appointments that don't require one
+ public static async Task> GetRoomsAsync()
{
- Text = "None", // can say anything you like, it's just another resource entry
- Value = "",
- Color = ""
- },
+ await Task.Delay(100);
+
+ List result = new List();
+
+ result.Add(new Resource()
+ {
+ Text = "Small Room",
+ Value = "1",
+ Color = "var(--kendo-color-success-subtle)"
+ });
+ result.Add(new Resource()
+ {
+ Text = "Big Room",
+ Value = "2",
+ Color = "var(--kendo-color-info-subtle)"
+ });
+
+ return result;
+ }
- // we will see these colors first because the rooms resource is declared first
- new Resource
- {
- Text = "Big Room",
- Value = "1",
- Color = "orange"
- },
- new Resource
+ public static async Task> GetManagersAsync()
{
- Text = "Small Room",
- Value = "2",
- Color = "crimson"
- },
- };
-
- public class Resource
- {
- // these are the default field names
- public string Text { get; set; }
- public string Value { get; set; }
- public string Color { get; set; } // must be a valid CSS string
+ await Task.Delay(100);
+
+ List result = new List();
+
+ result.Add(new Resource()
+ {
+ Text = "Team Lead",
+ Value = "1",
+ Color = "var(--kendo-color-warning-subtle)"
+ });
+ result.Add(new Resource()
+ {
+ Text = "Senior Manager",
+ Value = "2",
+ Color = "var(--kendo-color-error-subtle)"
+ });
+
+ return result;
+ }
}
- public class SchedulerAppointment
+ public class Appointment
{
- // fields that match the resource declaration Field
- public string ManagerName { get; set; }
- public string RoomId { get; set; }
- // the rest of the standard appointment fields
- public string Title { get; set; }
- public string Description { get; set; }
+ public Guid Id { get; set; } = Guid.NewGuid();
+ public string Title { get; set; } = string.Empty;
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
+ public string Description { get; set; } = string.Empty;
+ public string Room { get; set; } = string.Empty;
+ public string Manager { get; set; } = string.Empty;
+ }
+
+ public class Resource
+ {
+ public string Text { get; set; } = string.Empty;
+ public string Value { get; set; } = string.Empty;
+ public string Color { get; set; } = string.Empty;
}
}
````
-
## See Also
* [Live Demo: Scheduler Resources](https://demos.telerik.com/blazor-ui/scheduler/resources)
-* [Scheduler Overview](slug:scheduler-overview)
-* [Scheduler Data Binding](slug:scheduler-appointments-databinding)
+* [Scheduler Resource Grouping](slug:scheduler-resource-grouping)
* [Scheduler Appointment Editing](slug:scheduler-appointments-edit)
+* [Scheduler Data Binding](slug:scheduler-appointments-databinding)
diff --git a/components/scheduler/templates/appointment.md b/components/scheduler/templates/appointment.md
index 6ff88afefe..b06b6d503d 100644
--- a/components/scheduler/templates/appointment.md
+++ b/components/scheduler/templates/appointment.md
@@ -25,7 +25,7 @@ You can set a template for the entire scheduler, or you can also set templates p
The `context` of the template is the item that it will display. You can cast it to the model type you use.
-You can also style the entire appointments by adding a class to their wrapping element by using the [ItemRender event](slug:scheduler-events#itemrender).
+You can also style the entire appointments by adding a class to their wrapping element by using the [ItemRender event](slug:scheduler-events#onitemrender).
>caption Example of using appointment templates and all-day appointment templates in the scheduler. The Month view uses a different template than the other views
diff --git a/knowledge-base/scheduler-conditionally-disable-drag-for-some-appointments.md b/knowledge-base/scheduler-conditionally-disable-drag-for-some-appointments.md
index 884a598139..fe0dc4e632 100644
--- a/knowledge-base/scheduler-conditionally-disable-drag-for-some-appointments.md
+++ b/knowledge-base/scheduler-conditionally-disable-drag-for-some-appointments.md
@@ -34,7 +34,7 @@ This KB article answers the following questions:
To conditionally disable dragging an appointment based on your desired condition, follow these steps:
-1. Handle the [`OnItemRender` event](slug:scheduler-events#itemrender) to add a custom CSS class to the non-draggable appointments.
+1. Handle the [`OnItemRender` event](slug:scheduler-events#onitemrender) to add a custom CSS class to the non-draggable appointments.
2. Use this custom CSS class as a selector to stop the [pointer-events](https://www.w3schools.com/cssref/css3_pr_pointer-events.php) of the targeted appointments.
3. Extend the [`OnUpdate` handler](slug:scheduler-appointments-edit#basics) logic to ensure the appointment will not be dropped to another slot. Steps 1 and 2 will prevent dragging, but the user can enable the pointer events from the DOM inspector. Add a check in your `OnUpdate` handler to ensure that if the user drags the appointment, it will not be updated and dropped to a different slot.
diff --git a/knowledge-base/scheduler-many-colors-for-appointments.md b/knowledge-base/scheduler-many-colors-for-appointments.md
index 085f0012a3..bbcb57556c 100644
--- a/knowledge-base/scheduler-many-colors-for-appointments.md
+++ b/knowledge-base/scheduler-many-colors-for-appointments.md
@@ -24,7 +24,7 @@ components: ["scheduler"]
## Description
-I want to set different background colors to the appointments dynamically. I can add custom CSS classes through the [OnItemRender](slug:scheduler-events#itemrender) event. However, this isn't a practical use case for us, as we will be applying many different styles, which can change depending on who is using the application, so we don't want to have that many classes for each case. Is there any other way to achieve the desired result? We already have the colors in the database.
+I want to set different background colors to the appointments dynamically. I can add custom CSS classes through the [OnItemRender](slug:scheduler-events#onitemrender) event. However, this isn't a practical use case for us, as we will be applying many different styles, which can change depending on who is using the application, so we don't want to have that many classes for each case. Is there any other way to achieve the desired result? We already have the colors in the database.
## Solution