Views Basics
The Kendo UI for Vue Scheduler accepts a collection of views through its views prop and renders only the currently active view.
Start Free Trial
View Types
Currently, the Scheduler component supports the following built-in views:
Getting Started
Import the Scheduler from the @progress/kendo-vue-scheduler package.
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.
<Scheduler
:data-items="sampleData"
:default-date="displayDate"
:views="views"
>
</Scheduler>The following example demonstrates how to render the Day, Week, and Month Scheduler views.
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. 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.
Setting the Default View
To set the initially selected view, set the defaultView property to the name of the desired view.
Controlling the Selected View
To control the view selection, provide the view prop and handle the viewchange 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.