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.

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

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

View Source
Change Theme:

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 />

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.

View Source
Change Theme: