New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Disabled Dates

Updated over 6 months ago

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.

Razor
    @(Html.Kendo().Calendar()
        .Name("calendar")
        .Value(DateTime.Now)
        .DisableDates(new[] {DayOfWeek.Monday })
        )

Adding a Function

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

Razor
@(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>

See Also