Native Components / Date Inputs / Calendar

Multiple Views

The Calendar enables you to control the number of the horizontally rendered views.

To set the view number, use the views property. By default, the Calendar renders two views.

<div id="vueapp" class="vue-app">
    <div class="example-config">
        Number of rendered views: &nbsp;
        <input
            type="number"
            min="1"
            max="10"
            class="k-textbox"
            :value="views"
            @change="handleInputChange"
        />
    </div>
    <Calendar
        :views=views
    />
</div>

import Vue from 'vue';
import { Calendar } from '@progress/kendo-vue-dateinputs';

Vue.component('Calendar', Calendar);
new Vue({
    el: '#vueapp',
    data: function(){
        return {
            views: 2
        }
    },
    methods: {
        handleInputChange (event) {
            if (!event.target.value || event.target.value < 11) {
                this.views = event.target.value;
            }
        }
    }
});

In this article