# 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`](https://www.telerik.com/kendo-react-ui/components/scheduler/views/timeline)
* [`Day` view](https://www.telerik.com/kendo-react-ui/components/scheduler/views/day)
* [`Week` view](https://www.telerik.com/kendo-react-ui/components/scheduler/views/week)
* [`Month` view](https://www.telerik.com/kendo-react-ui/components/scheduler/views/month)
* [`Agenda` view](https://www.telerik.com/kendo-react-ui/components/scheduler/views/agenda)

## Getting Started

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

```jsx
    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](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduler) component.

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

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

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/views/getting-started/func/source.txt)

## Setting the Default View

To set the initially selected view, set the [`defaultView`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#defaultview) property to the `name` of the desired view.

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

## Controlling the Selected View

To control the view selection, provide a pair of the [`view`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#view) and [`onViewChange`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/views/controlled-state/func/source.txt)

## Multi-Day Timed Events

In **Day**, **Week**, and **WorkWeek** views, multi-day timed events appear in the all-day row with their start and end times. Arrows at the sides of an event indicate that it starts before or ends after the visible date range.

The event's dates and `isAllDay` value do not change. Single-day timed events stay in the time grid. All-day events (`isAllDay: true`) have no time labels.

The example below shows all three event types.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/views/multi-day-events/source.txt)

## Suggested Links

* [Timeline View](https://www.telerik.com/kendo-react-ui/components/scheduler/views/timeline)
* [Day View](https://www.telerik.com/kendo-react-ui/components/scheduler/views/day)
* [Week View](https://www.telerik.com/kendo-react-ui/components/scheduler/views/week)
* [Month View](https://www.telerik.com/kendo-react-ui/components/scheduler/views/month)
* [Agenda View](https://www.telerik.com/kendo-react-ui/components/scheduler/views/agenda)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)