# 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/grouping/overview/source.txt)

## 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/data-binding/resources/source.txt)

Each resource is described by a [`Resource`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/resource) object that contains all possible values for it. To define resources, set the [`resources`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#resources) attribute.

```typescript
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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#group) property and specify which resources to group by:

```typescript
public group: Group = {
  resources: ['Rooms'], // Reference the resource definition used for grouping.
  orientation: 'vertical'
};
```

The following example demonstrates a basic configuration of resources and grouping in the Scheduler.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/grouping/basic-configuration/source.txt)

### Grouping Orientations

You can display resources in two [orientations](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/group#orientation):

* 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.

```typescript
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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/grouping/orientation/source.txt)

### Multiple Resource Grouping

You can group by multiple resources to create hierarchical organization:

```typescript
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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/grouping/multiple-resources/source.txt)

### Resource Colors

Resources can have associated colors that automatically style events. You can use hardcoded hex colors or Kendo CSS variables:

```typescript
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](https://www.telerik.com/themebuilder) themes. For a complete list of available color variables, see the [Theme Variables Documentation](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/theme-variables/).

The following example demonstrates resource colors applied to events in the Scheduler.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/grouping/equipment-booking/source.txt)

### Multiple Resource Assignment

Events can be assigned to multiple resources by using arrays:

```typescript
{
  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], // Associate the event with multiple room resources.
  attendeeIds: [1, 2, 3] // Associate the event with multiple attendee resources.
}
```

The following example demonstrates events assigned to multiple resources.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/grouping/multiple-assignment/source.txt)

## 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:

* [Editing of Resources with built-in Directives](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing#adding-resource-editing)
* [Reactive Forms Editing with Resources and Grouping](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/editing/editing-reactive-forms#reactive-forms-with-resources-and-grouping)

## 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).

## Suggested Links

* [Scheduler Data Binding](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/data-binding)
* [Scheduler Views Overview](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views)
* [Scheduler Templates](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates)
* [Scheduler API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent)