Disabled Dates

The Calendar allows you to disable certain days which are not intended to be selected by the end user—for example, weekends, national holidays, and others.

To disable a date, either:

Setting Arrays

When you set an array, list the days that need to be disabled by using the first letters from their names in English.

<kendo-calendar :disable-dates='["we", "th"]'></kendo-calendar>

Adding Functions

When you add a function, determine its return value as true for the date that is disabled.

<div id="vueapp" class="vue-app">
    <kendo-calendar :disable-dates="disableDates"></kendo-calendar>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        disableDates: function (date) {
            var disabled = [1,8,15,22,29];
            if (date && disabled.indexOf(date.getDate()) > -1 ) {
                return true;
            } else {
                return false;
            }
        }
    }
})

In this article