Grouping

The Scheduler accepts a group property which, in combination with the resources property, renders each resource as a sub-view of the Scheduler.

Except for the Agenda view, all available Scheduler views can render both horizontal and vertical grouping.

For more information on grouping by resources in each view, refer to the following sections:

Getting Started

To configure the group rendering, set the group and resources properties. The resources field of the group property has to be an array of string values that corresponds to the name field of the resource.

The following example demonstrates how to group events based on their roomId and personIds and with the corresponding coloring based on the roomId.

import React from 'react';
import ReactDOM from 'react-dom';

import { Scheduler, DayView } from '@progress/kendo-react-scheduler';
import { data, defaultDate } from './data';

const group = {
    resources: ['Rooms', 'Person'],
    orientation: 'horizontal'
}
const resources = [{
    name: 'Rooms',
    data: [
        { text: 'Meeting Room 101', value: 1, color: '#5392E4' },
        { text: 'Meeting Room 201', value: 2, color: '#FF7272' }
    ],
    field: 'roomId',
    valueField: 'value',
    textField: 'text',
    colorField: 'color'
}, {
    name: 'Person',
    data: [
        { text: 'Peter', value: 1 },
        { text: 'Alex', value: 2 }
    ],
    field: 'personId',
    valueField: 'value',
    textField: 'text',
    colorField: 'color'
}]

const App = () => {
    return (
        <Scheduler
            group={group}
            resources={resources}

            data={data}
            defaultDate={defaultDate}

            timezone={"Etc/UTC"}
        >
            <DayView />
        </Scheduler>
    )
}

ReactDOM.render(<App />, document.querySelector('my-app'));

Setting Multiple Resource Groups

Based on the resource value, a single event can appear in multiple resource groups. In the previous example, both Peter and Alex can have an appointment for a single event that is happening in Meeting Room 101. In this case, the Scheduler must render the event in both groups.

The following example demonstrates how to render an event in two or more groups based on the provided resources.

import React from 'react';
import ReactDOM from 'react-dom';

import { Scheduler, DayView } from '@progress/kendo-react-scheduler';
import { data, defaultDate } from './data';

const group = {
    resources: ['Rooms', 'Persons'],
    orientation: 'horizontal'
}
const resources = [{
    name: 'Rooms',
    data: [
        { text: 'Meeting Room 101', value: 1 },
        { text: 'Meeting Room 201', value: 2 }
    ],
    field: 'roomId',
    valueField: 'value',
    textField: 'text',
    colorField: 'color'
}, {
    // We're changing the name from `Person` to `Persons`.
    name: 'Persons',
    data: [
        { text: 'Peter', value: 1, color: '#5392E4' },
        { text: 'Alex', value: 2, color: '#FF7272' }
    ],
    // We're changing the field from `personId` to `PersonIds`.
    field: 'personIds',
    valueField: 'value',
    textField: 'text',
    colorField: 'color'
}]

const App = () => {
    return (
        <Scheduler
            group={group}
            resources={resources}

            data={data}
            defaultDate={defaultDate}

            timezone={"Etc/UTC"}
        >
            <DayView />
        </Scheduler>
    )
}

ReactDOM.render(<App />, document.querySelector('my-app'));
 /