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:

• Timeline view
• Day view
• Week view
• Month view
• Agenda view

Getting Started

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

Copy Code    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.

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

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

Setting the Default View

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

Copy Code    <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.

Suggested Links

• Timeline View
• Day View
• Week View
• Month View
• Agenda View
• KendoReact Scheduler