All Components

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