New to Telerik UI for ASP.NET Core? Download free 30-day trial

Disabled Dates

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

To disable a date, either set an array or add a function.

Setting an Array

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

    @(Html.Kendo().Calendar()
        .Name("calendar")
        .Value(DateTime.Now)
        .DisableDates(new[] {DayOfWeek.Monday })
        )
    @{
        var disabledDates = new DateTime[] { DateTime.Now.AddDays(2), DateTime.Now.AddDays(2) };
    }

    <kendo-calendar name="calendar" disable-dates="disabledDates" value="DateTime.Now">
    </kendo-calendar>

Adding a Function

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

@(Html.Kendo().Calendar()
    .Name("calendar")
    .Value(DateTime.Now)
    .DisableDates("disabledDatesHandler")
)

<script>
    function disabledDatesHandler(date) {
        var disabled = [13, 14, 20, 21];
        if (date && disabled.indexOf(date.getDate()) > -1) {
            return true;
        } else {
            return false;
        }
    }
</script>
    <div class="demo-section k-content" style="text-align: center;">
        <kendo-calendar name="calendar" disable-dates-handler="disabledDatesHandler" value="DateTime.Now">
        </kendo-calendar>
    </div>

    <script>
        function disabledDatesHandler(date) {
            var disabled = [13, 14, 20, 21];
            if (date && disabled.indexOf(date.getDate()) > -1) {
                return true;
            } else {
                return false;
            }
        }
    </script>

See Also

In this article