Start View and Navigation Depth

Updated on Sep 29, 2026

The DateRangePicker enables you to set the initial view it renders and define the navigation depth of the views.

To define the initially rendered view, use the Start option. To control the navigation depth, use the Depth option.

The Calendar view supports the following predefined views:

• Month—Shows the days of the month.
• Year—Shows the months of the year.
• Decade—Shows the years of the decade.
• Century—Shows the decades of the century.

The following example demonstrates how to create a DateRangePicker that sets the start of a year and the navigation depth of a month.

Razor

    @(Html.Kendo().DateRangePicker()
        .Name("daterangepicker")
        .Start(CalendarView.Year)
        .Depth(CalendarView.Month)
    )

Start and Depth control the initial view and the selection depth; they do not lock the calendar to one month. To restrict both dates in the range to a specific month, set Min and Max to the first and last dates of that month.

Razor

    @(Html.Kendo().DateRangePicker()
        .Name("daterangepicker")
        .Min(new DateTime(2026, 9, 1))
        .Max(new DateTime(2026, 9, 30))
    )

See Also

• Server-Side API