Resources

The Scheduler component accepts a resources property which is used to change the appearance of the events based on the provided configuration.

Getting Started

An event can have one or more resources assigned to it—for example, a meeting room or a guest list. For more information on configuring the Scheduler to display each resource as a sub-view, refer to the article on grouping.

Each resource is described by a SchedulerResource object that contains all possible values for it. To define the resources, set the resources property.

As a minimum configuration, you have to define the following fields:

  • field—The field name of the event that contains the resource value.
  • data—The resource data array.
  • valueField—The field name from the data that contains the value of the resource.
  • textField—The field name from the data that contains the text of the resource.

Using Visual Separation

One of the most useful use cases for the resources property is to visually separate the events based on their field values.

The following example demonstrates how to color the events based on their roomId field.

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

import { Scheduler, MonthView } from '@progress/kendo-react-scheduler';
import { sampleDataWithResources, displayDate } from './events-utc';

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'
}]

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

            data={sampleDataWithResources}
            defaultDate={displayDate}
        >
            <MonthView />
        </Scheduler>
    )
}

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

Setting Multiple Resources

The resources property accepts a collection of resources which means that you can provide two or more resources. If you provide multiple resources, the event will acquire the color of the first matched resource.

The following example is based on the previous example and provides two resources.

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

import { Scheduler, MonthView } from '@progress/kendo-react-scheduler';
import { sampleDataWithResources, displayDate } from './events-utc';

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

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

            data={sampleDataWithResources}
            defaultDate={displayDate}
        >
            <MonthView />
        </Scheduler>
    )
}

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