Views Basics

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

The Scheduler Package is part of KendoReact, a professionally built commercial UI library. To try out this Scheduler you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.


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.

Example
View Source
Edit In Stackblitz  
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 />
    </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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?