MultiViewCalendar Overview

The MultiViewCalendar renders a graphical Gregorian calendar with multiple horizontal views.

It supports the selection and navigation between dates as well as data templates and ranges for scheduling appointments.

The MultiViewCalendar wrapper for Vue is a client-side wrapper for the Kendo UI MultiViewCalendar widget.

Basic Usage

The following example demonstrates the MultiViewCalendar in action.

<div id="vueapp" class="vue-app">
    <kendo-multiviewcalendar :value="new Date()"></kendo-multiviewcalendar>
</div>
Vue.use(DateinputsInstaller);
new Vue({ el: '#vueapp' })

Functionality and Features

Events

The following example demonstrates basic MultiViewCalendar events. You can subscribe to all MultiViewCalendar events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-multiviewcalendar  v-on:navigate="onNavigate"></kendo-multiviewcalendar>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        onNavigate: function (e) {
            var view = e.sender.view();
            console.log(view.name); //the name of the current view

            var current = e.sender.current();
            console.log(current); //currently the focused date
        }
    }
})

In this article