All Components

Components / DateInputs / Calendar

Calendar Overview

The Calendar is a form component that represents a graphical Gregorian calendar.

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

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

Basic Usage

The following example demonstrates the Calendar in action.

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

Functionality and Features

Events

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

<div id="vueapp" class="vue-app">
    <kendo-calendar v-on:navigate="onNavigate"></kendo-calendar>
</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