Date Navigations in .NET MAUI Calendar (SfCalendar)

21 Jan 20257 minutes to read

Programmatic date navigation

It allows you to navigate using the Dates programmatically in the calendar control using the DisplayDate property of SfCalendar.

<calendar:SfCalendar  x:Name="calendar" 
                        View="Month">
</calendar:SfCalendar>
this.calendar.DisplayDate = DateTime.Now.AddMonths(2).Date;

Month view Display date in .NET MAUI Calendar.

Programmatic view navigation

It allows you to navigate using the views programmatically in the calendar control using the View property of SfCalendar.

<calendar:SfCalendar  x:Name="calendar" 
                        View="Month">
</calendar:SfCalendar>
this.calendar.View = CalendarView.Month;

Month view in .NET MAUI Calendar.

Allow view navigation

It allows you to navigate using the AllowViewNavigation property by tapping interaction on the cell or header. By using this property, you can restrict the view navigation and allow you to select the cells in the Year, Decade, and Century views.

The following code shows when the AllowViewNavigation property is true.

<calendar:SfCalendar  x:Name="calendar" 
                        View="Month"
                        AllowViewNavigation="True">
</calendar:SfCalendar>
this.calendar.AllowViewNavigation = true;

You can navigate to the next or previous month in the Calendar control by tapping on the leading or trailing dates. Tapping on a leading date moves the calendar to the previous month, while tapping on a trailing date moves it to the next month. In SfCalendar, this functionality can be enabled or disabled using the NavigateToAdjacentMonth property.

The following code shows the Navigation by using NavigateToAdjacentMonth property.

<calendar:SfCalendar  x:Name="calendar" 
                        View="Month"
                        NavigateToAdjacentMonth="true">
</calendar:SfCalendar>
this.calendar.NavigateToAdjacentMonth = true;

NOTE

The NavigateToAdjacentMonth is only applicable for single selection mode.

Month view navigation to adjacent months using leading/trailing dates in .NET MAUI Calendar.

Programmatically change to adjacent dates

The next and previous views can be navigated by swiping the Calendar control from right to left and left to right. In the SfCalendar, view can be changed programmatically by using the Forward and Backward methods.

Forward

The Forward navigation allows you to view the next immediate date of the calendar based on the CalendarViews.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Calendar:SfCalendar x:Name="calendar"
                             View="Month" />
        <Button x:Name="button" Grid.Row="1" Text="Forward"
                Clicked="button_Clicked" />
</Grid>
private void button_Clicked(object sender, EventArgs e)
{
  this.calendar.Forward();
}

Backward

The Backward navigation allows you to view the immediate previous date of the calendar based on the CalendarViews.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Calendar:SfCalendar x:Name="calendar"
                             View="Month" />
        <Button x:Name="button" Grid.Row="1" Text="Backward"
                Clicked="button_Clicked" />
</Grid>
private void button_Clicked(object sender, EventArgs e)
{
  this.calendar.Backward();
}

Views can be navigated by using the Navigation direction property, either Vertical or Horizontal direction by setting the NavigationDirection property of Calendar. The default NavigationDirection is Vertical.

The following code shows the Navigation in the Horizontal direction.

<calendar:SfCalendar  x:Name="calendar" 
                        View="Month"
                        NavigationDirection="Horizontal">
</calendar:SfCalendar>
this.calendar.NavigationDirection = CalendarNavigationDirection.Horizontal;

Month view Horizontal navigation direction in .NET MAUI Calendar.

Show navigation arrows

By using the ShowNavigationArrows property of the Calendar, you can navigate to the next or previous view of the calendar without swiping. By default, the value of ShowNavigationArrows is true.

<calendar:SfCalendar  x:Name="calendar" 
                        View="Month">
                        <Calendar:SfCalendar.HeaderView>
                            <Calendar:CalendarHeaderView ShowNavigationArrows="False" />
                        </Calendar:SfCalendar.HeaderView>
</calendar:SfCalendar>
this.calendar.HeaderView.ShowNavigationArrows = false;

Month view without ShowNavigationArrows in .NET MAUI Calendar.