New to Kendo UI for jQuery? Start a free 30-day trial

Range

configuration

Specifies an initial range selection. This option is available only when the selectable configuration is set to range.

range

Object

Default: { start: null, end: null }

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        selectable: "range",
        range: { start: new Date(2024, 3, 3), end: new Date(2024, 3, 13) }
    });
</script>

range.end

Date

Specifies the end date of the range selection.

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        selectable: "range",
        range: { 
            start: new Date(2024, 5, 10), 
            end: new Date(2024, 5, 25) // June 25, 2024
        }
    });
</script>

range.start

Date

Specifies the start date of the range selection.

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        selectable: "range",
        range: { 
            start: new Date(2024, 5, 10), // June 10, 2024
            end: new Date(2024, 5, 20) 
        }
    });
</script>