Resources and Grouping
The Kendo UI for Angular Scheduler allows you to organize and display events by resources such as meeting rooms, people, or categories. Use resources to assign metadata to events and grouping to create separate visual lanes for each resource.
Binding of Resources
An event can have one or more "resources" assigned to it—for example, a meeting room or a guest list. Resources enable powerful organization and grouping capabilities within the Scheduler.
The following example demonstrates how to bind resources to events in the Scheduler.
Each resource is described by a Resource object that contains all possible values for it. To define resources, set the resources attribute.
public resources: Resource[] = [
{
name: 'Rooms',
field: 'roomId',
valueField: 'value',
textField: 'text',
colorField: 'color',
data: [
{ text: 'Conference Room A', value: 1, color: '#1e88e5' },
{ text: 'Conference Room B', value: 2, color: '#7b1fa2' }
]
}
];The Resources object supports the following properties:
| Property | Type | Required | Description |
|---|---|---|---|
field | string | Yes | The field name in your event data that stores the resource value. |
data | any[] | Yes | Array of available resource options with their properties. |
valueField | string | Yes | The field name in resource data that contains the unique identifier. |
textField | string | Yes | The field name in resource data that contains the display text. |
name | string | No | The resource name for identification. Uses field value if not specified. |
colorField | string | No | The field name in resource data that contains the color value for styling. |
multiple | boolean | No | Allows events to have multiple values for this resource type. |
The resource values are assigned to events by setting the corresponding field values.
Grouping Resources
Once you have resources defined, you can enable grouping to display resources as separate visual lanes or columns in the Scheduler. This creates clear organization and makes it easy to see resource allocation at a glance.
To enable grouping, use the group property and specify which resources to group by:
public group: Group = {
resources: ['Rooms'], // Resource names to group by
orientation: 'vertical'
};The following example demonstrates a basic configuration of resources and grouping in the Scheduler.
Grouping Orientations
You can display resources in two orientations:
- Vertical grouping—Resources appear as horizontal lanes, stacked vertically. Ideal for timeline views and provides clear separation between resources.
- Horizontal grouping—Resources appear as columns side by side. Works well with day and week views for comparing resource usage.
public group: Group = {
resources: ['Rooms'],
orientation: 'vertical'
};
public group: Group = {
resources: ['Rooms'],
orientation: 'horizontal'
};The following example demonstrates both orientations in the Scheduler's various views.
Multiple Resource Grouping
You can group by multiple resources to create hierarchical organization:
public group: Group = {
resources: ['Rooms', 'Owners'],
orientation: 'vertical'
};This creates nested grouping where events are first grouped by rooms, then by owners within each room.
The following example demonstrates multiple resource grouping in the Scheduler.
Resource Colors
Resources can have associated colors that automatically style events. You can use hardcoded hex colors or Kendo CSS variables:
export const resources: Resource[] = [
{
name: 'Rooms',
data: [
{ text: 'Conference Room A', value: 1, color: 'var(--kendo-color-primary)' },
{ text: 'Conference Room B', value: 2, color: '#f44336' },
{ text: 'Board Room', value: 3, color: 'var(--kendo-color-warning)' },
],
field: 'roomId',
valueField: 'value',
textField: 'text',
colorField: 'color'
}
];Using Kendo CSS variables (such as var(--kendo-color-primary) or var(--kendo-color-success)) ensures that resource colors automatically adapt when you switch themes or use custom ThemeBuilder themes. For a complete list of available color variables, see the Theme Variables Documentation.
The following example demonstrates resource colors applied to events in the Scheduler.
Multiple Resource Assignment
Events can be assigned to multiple resources by using arrays:
{
id: 1,
title: 'Cross-team Meeting',
start: new Date('2023-06-12T09:00:00'),
end: new Date('2023-06-12T10:00:00'),
roomId: [1, 2], // Multiple rooms
attendeeIds: [1, 2, 3] // Multiple attendees
}The following example demonstrates events assigned to multiple resources.
Resource Editing
When editing is enabled, the scheduler automatically provides resource selection in the edit forms. You can customize this behavior using custom edit templates.
For detailed editing implementations with resources and examples, see:
Best Practices
When implementing resources and grouping:
- Keep hierarchies shallow (2-3 levels max) for better performance.
- Use meaningful names and colors that align with your application's design.
- Consider user workflows when designing grouping structure.
- Limit simultaneously displayed resources to maintain good performance.
- Choose appropriate view types for your resource count (timeline for many resources, day/week for fewer).