Navigate between views in WinUI Calendar (SfCalendar)

22 Jul 20265 minutes to read

You can easily navigate to the month, year, decade, or century views to select different dates by clicking the header button. Initially, the month view is loaded. You can also change the view programmatically by using the DisplayMode property.

Bring a date into view

You can navigate to the month containing the required date using the SetDisplayDate method. To navigate to the required date of any month or year, pass the DateTimeOffset value in the SetDisplayDate method argument.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="calendar" 
                         Loaded="calendar_Loaded">
    </calendar:SfCalendar>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

private void calendar_Loaded(object sender, RoutedEventArgs e)
{
    calendar.SetDisplayDate(new DateTimeOffset(new DateTime(2021, 01, 01)));
}

Restrict navigation between views

You can restrict navigation within a minimum and maximum view by using the MinDisplayMode and MaxDisplayMode properties. This will be useful when your date range is smaller and you do not want to show the century view. By default, the value of MinDisplayMode is Month and MaxDisplayMode is Century.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar"
                         MinDisplayMode="Month"
                         MaxDisplayMode="Decade"
                         DisplayMode="Month"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.MinDisplayMode = CalendarDisplayMode.Month;
sfCalendar.MaxDisplayMode = CalendarDisplayMode.Decade;
sfCalendar.DisplayMode = CalendarDisplayMode.Month;

NOTE

Download demo application from GitHub.

Selection based on view restriction

You can restrict users from selecting dates within specific views (example: choosing a valid date for a credit card) in the Calendar control using the MinDisplayMode and MaxDisplayMode properties.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar" 
                                 MinDisplayMode="Year"
                                 MaxDisplayMode="Decade"
                                 />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.MinDisplayMode = CalendarDisplayMode.Year;
sfCalendar.MaxDisplayMode = CalendarDisplayMode.Decade;

Scrolling within a view

You can navigate within a view using mouse scroll or by navigation buttons in the Calendar control. The navigation direction animation can be changed by using the NavigationDirection property value. By default, the value of the NavigationDirection property is Vertical.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar"
                         NavigationDirection="Horizontal"
                         />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.NavigationDirection = Orientation.Horizontal;

When the NavigationDirection property is set to Vertical, you can navigate within views using mouse scroll or navigation buttons. When the NavigationDirection property is set to Horizontal, you can navigate only using navigation buttons.

NOTE

Download demo application from GitHub.

Navigation by keyboard

You can navigate between elements in the Calendar control using keyboard shortcuts or mouse interaction. The following is the list of keyboard shortcuts to navigate and select.

• Tab or Shift+Tab - To navigate between date cells and elements in the header.
• UpArrow, DownArrow, LeftArrow, and RightArrow - To navigate between calendar date, month, or decade cells.
• Space or Enter - To select a cell.
• Ctrl + UpArrow and Ctrl + DownArrow - To navigate between views (Example: Navigate from month to year view).
• PageUp and PageDown - To navigate within views (Example: Navigate between months).
• Home or End - To navigate to the first or last cell of the current view.