Agenda View

The Agenda view displays a weekly summary in a table format.

Getting Started

For the full list of configuration options, refer to the API reference of the AgendaView properties.

The following example demonstrates how to set common properties for the Agenda view of the Scheduler.

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

import { Scheduler, AgendaView } from '@progress/kendo-react-scheduler';
import { sampleData, displayDate } from './events-utc.js';

const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
        >
            <AgendaView
                title="Compact View"

                step={2}
                numberOfDays={2}

                selectedDateFormat={"From: {0:D} To: {1:D}"}
                selectedShortDateFormat={'From: {0:d} To: {1:d}'}
            />
        </Scheduler>
    )
}

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

Grouping by Resource

You can configure the Agenda view to display events that are grouped by a resource.

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

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

const App = () => {
    return (
        <Scheduler
            data={sampleDataWithResources}
            defaultDate={displayDate}
            group={{
                resources: ['Rooms', 'Persons']
            }}
            resources={[
                {
                    name: 'Rooms',
                    data: [
                        { text: 'Meeting Room 101', value: 1, color: 'red' },
                        { text: 'Meeting Room 201', value: 2, color: 'green' }
                    ],
                    field: 'roomId',
                    valueField: 'value',
                    textField: 'text',
                    colorField: 'color'
                },
                {
                    name: 'Persons',
                    data: [
                        { text: 'Peter', value: 1 },
                        { text: 'Alex', value: 2 }
                    ],
                    field: 'personId',
                    multiple: true,
                    valueField: 'value',
                    textField: 'text',
                    colorField: 'color'
                }]}
        >
            <AgendaView
                title="Compact View"
            />
        </Scheduler>
    )
}

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