Calendar Views in Calendar Control

27 Aug 20261 minute to read

The Calendar has the following pre-defined views that provide a flexible way to navigate back and forth when selecting dates.

View Description
month (default) Displays the days in a month.
year Displays the months in a year.
decade Displays the years in a decade.

Defining the start property allows you to set the initial view rendered by the Calendar.

The following example demonstrates how to set the year as the start view of the Calendar.

@{
    var value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15);
}

<ejs-calendar id="calendar" value="@value" start="Year"></ejs-calendar>

Restricting calendar views

By defining the start and depth properties with different views, you can limit the drill-down and drill-up navigation available to the user. The Calendar will drill down to the view set in the depth property and drill up to the view set in the start property. Both properties accept a CalendarView enum value (Month, Year, or Decade), ordered as Month < Year < Decade.

The following example displays the Calendar in decade view, and allows you to select a date in month view.

Depth view should always be smaller than the start view. If the depth and start views are the same, the Calendar view remains unchanged.

@{
    var value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15);
}

<ejs-calendar id="calendar" value="@value" start=Decade depth=Year></ejs-calendar>

View Sample in GitHub.