Dates

The Calendar enables you to set the behavior of its dates.

You can apply either of the following approaches:

Setting the Focused Date

The Calendar always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the focusedDate property by setting it to a specific Date value. The Date value has to be a valid JavaScript Date object.

<div id="vueapp" class="vue-app">
  <div class="example-config">
        <calendar :focused-date="new Date(2010, 10, 10)"/>
    </div>
</div>
import { Calendar } from '@progress/kendo-vue-dateinputs';
Vue.component('calendar', Calendar);

new Vue({
    el: '#vueapp'
});

Selected Dates

By default, the selected date is not set and the Calendar displays only the focused date. To define the selected date, use the value prop.

The Calendar accepts the following values that you can set as selected:

Single Dates

To set a single date as selected, pass the JavaScript Date object as a value.

<div id="vueapp" class="vue-app">
  <div class="example-config">
        <calendar :value="new Date(2010, 10, 10)"/>
    </div>
</div>
import { Calendar } from '@progress/kendo-vue-dateinputs';
Vue.component('calendar', Calendar);

new Vue({
    el: '#vueapp'
});

Multiple Dates

To set multiple dates as selected, pass an array of JavaScript Date objects as a value. In such scenario we need to se the mode prop to 'multiple'.

<div id="vueapp" class="vue-app">
  <div class="example-config">
        <calendar
            :mode="'multiple'"
            :value="[
                new Date(2010, 10, 10),
                new Date(2010, 10, 11),
                new Date(2010, 10, 12)
            ]"/>
    </div>
</div>
import { Calendar } from '@progress/kendo-vue-dateinputs';
Vue.component('calendar', Calendar);

new Vue({
    el: '#vueapp'
});

Range Date Selections

To set a range of dates as selected, pass an object with start and end keys which represent the selected range. In such scenario we need to se the mode prop to 'range'.

<div id="vueapp" class="vue-app">
  <div class="example-config">
        <calendar 
            :mode="'range'"
            :value="{
                start: new Date(2010, 10, 10),
                end: new Date(2010, 10, 20)
            }"/>
    </div>
</div>
import { Calendar } from '@progress/kendo-vue-dateinputs';
Vue.component('calendar', Calendar);

new Vue({
    el: '#vueapp'
});

In this article