Views Basics

The KendoReact Scheduler accepts a collection of Scheduler views as children but renders only the currently active view.

View Types

Currently, the Scheduler component supports the following built-in views:

Getting Started

To render the desired views, import them from the @progress/kendo-react-scheduler package.

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

To specify the available views and set their configuration options, place them as child components of the Scheduler component.

<Scheduler>
    <DayView startTime="07:00"/>
    <WeekView workWeekStart={Day.Monday} />
</Scheduler>

The following example demonstrates how to render the Day, Week, and Month Scheduler views.

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

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

const App = () => {
    return (
        <Scheduler data={sampleData} defaultDate={displayDate}>
            <DayView />
            <WeekView />
        </Scheduler>
    )
}

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

Setting the Default View

To set the initially selected view, set the defaultView property to the name of the desired view.

<Scheduler defaultView="week">
    <DayView />
    <Week />
    <MonthView />
</Scheduler>

Controlling the Selected View

To control the view selection, provide a pair of the view and onViewChange properties. Providing only the view property will render the Scheduler in a read-only view state.

The following example demonstrates how to control the view state based on an external source.

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

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

const App = () => {
    const [view, setView] = React.useState('day');

    // Handles Scheduler View Change
    const handleViewChange = (event) => { setView(event.value) }

    // Handles external View Change
    const handleViewSelect = (event) => { setView(event.target.value) }

    return (
        <div>
            <div className="example-config">
                <select value={view} onChange={handleViewSelect}>
                    <option value={'day'}>Day</option>
                    <option value={'week'}>Week</option>
                    <option value={'month'}>Month</option>
                </select>
            </div>
            <Scheduler
                view={view}
                onViewChange={handleViewChange}

                data={sampleData}
                defaultDate={displayDate}
            >
                <DayView />
                <WeekView />
                <MonthView />
            </Scheduler>
        </div>
    )
}

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