| title | page_title | description | slug | position | canonicalLink |
|---|---|---|---|---|---|
Overview |
MultiViewCalendar Overview - Components - Kendo UI for Vue |
Get an overview of the features the Kendo UI MultiViewCalendar wrapper for Vue delivers and use the component in Vue projects. |
overview_multiviewcalendar_wrapper |
0 |
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.
The following example demonstrates the MultiViewCalendar in action.
{% meta height:450 %} {% embed_file multiviewcalendar/basic/main.vue preview %} {% embed_file multiviewcalendar/basic/main.js %} {% endmeta %}
- [Disabled dates]({% slug disabled_dates_multiviewcalendar_wrapper %})
- [Active view]({% slug active_view_multiviewcalendar_wrapper %})
- [Multiple views]({% slug multiple_views_multiviewcalendar_wrapper %})
- [Selection]({% slug selection_multiviewcalendar_wrapper %})
- [Day template]({% slug day_template_multiviewcalendar_wrapper %})
- [Week column]({% slug week_column_multiviewcalendar_wrapper %})
- [Keyboard navigation]({% slug keyboard_navigation_multiviewcalendar_wrapper %})
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
}
}
})