Calendar Views in Blazor Calendar Component

17 Aug 20211 minute to read

A Calendar has the following predefined 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.

Set the initial view

When view is defined to the Start property of the Calendar, it allows you to set the initial view on rendering.

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

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime?" Value='@DateValue' Start="CalendarView.Year"></SfCalendar>

@code {
    public DateTime DateValue {get;set;} = DateTime.Now;

The output will be as follows.

Changing Blazor Calendar View

View Restriction

By defining the Start and Depth property with the different view, drill-down and drill-up views navigation can be limited to the users. Calendar views will be drill-down upto the view which is set in Depth property and drill-up upto the view which is set in Start property.

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, then the Calendar view remains unchanged.

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime?" Value='@DateValue' Start="CalendarView.Decade" Depth="CalendarView.Year"></SfCalendar>

    public DateTime DateValue {get;set;} = DateTime.Now;

The output will be as follows.

Restriction in Blazor Calendar