Views Basics

The Kendo UI for Vue Native Scheduler accepts a collection of Scheduler views as children but renders only the currently active view.

ninja-iconThe Views are part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

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-vue-scheduler package.

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

To specify the available views and set their configuration options, use the views property of the Scheduler component.

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

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

Change Theme
Theme
Loading ...

Setting the Default View

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

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...