# Views Basics

The Kendo UI for Vue Scheduler accepts a collection of views through its `views` prop and renders only the currently active view.

<CtaPanelOverview></CtaPanelOverview>

## View Types

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

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

## Getting Started

Import the Scheduler from the `@progress/kendo-vue-scheduler` package.

```js
import { Scheduler } from '@progress/kendo-vue-scheduler';
```

To specify the available views and set their configuration options, use the `views` property of the [Scheduler](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops) component.

```vue
<Scheduler
    :data-items="sampleData"
    :default-date="displayDate"
    :views="views"
>
</Scheduler>
```

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

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

## Multi-Day Timed Events

In **Day**, **Week**, and **WorkWeek** views, timed events that cross midnight appear in the All Day area above the time grid, even if they last less than a day.

Their dates and `isAllDay: false` value do not change. Start and end times appear at each visible end. If an event extends beyond the visible dates, a continuation arrow replaces the time at that end. All-day events have no time labels.

Day boundaries use the Scheduler's [timezone](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/timezones). An event ending at midnight does not occupy the next day. This rendering is automatic; **Month**, **Agenda**, and **Timeline** use their own layouts.

Compare overnight, multi-day, and all-day events below. Switch views or enable **Group by room** to see their placement.

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

## Setting the Default View

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/views/default-view/source.txt)

## Controlling the Selected View

To control the view selection, provide the [`view`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#view) prop and handle the [`viewchange`](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops#onviewchange) event. Providing only the `view` prop prevents view changes through the toolbar.

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

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

## Suggested Links

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