Articles in this section
Category / Section

How to Programmatically Navigate Views in the .NET MAUI Calendar (SfCalendar)?

4 mins read

In the Syncfusion® .NET MAUI Calendar control, programmatically navigate to different views using the View property of the SfCalendar using the following steps.

 

Step 1: Add the Button control and the SfCalendar control to your layout, as demonstrated in the following code sample.

 

XAML

<ContentPage.Behaviors>
    <local:CalendarBehavior />
</ContentPage.Behaviors>
<ContentPage.Content>
    <Grid RowDefinitions="0.1*, 0.9*"
          ColumnDefinitions="0.25*,0.25*,0.25*,0.25*">
        <Button x:Name="monthViewButton"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="Month" />
        <Button Grid.Column="1"
                x:Name="yearViewButton"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="Year" />
        <Button Grid.Column="2"
                x:Name="decadeViewButton"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="Decade" />
        <Button Grid.Column="3"
                x:Name="centuryViewButton"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="Century" />
        <calendar:SfCalendar Grid.Row="1"
                             Grid.ColumnSpan="4"
                             x:Name="calendar" />
    </Grid>
</ContentPage.Content>

 

Step 2: Use the Clicked event of the Button to set different views such as Month , Year , Decade  or Century to the View property of the SfCalendar, as specified in the following code sample

 

C#

public class CalendarBehavior: Behavior<ContentPage>
{
    private SfCalendar calendar;
    private Button monthViewButton, yearViewButton, decadeViewButton, centuryViewButton;
 
    protected override void OnAttachedTo(ContentPage bindable)
    {
        base.OnAttachedTo(bindable);
        this.calendar = bindable.FindByName<SfCalendar>("calendar");
        this.monthViewButton = bindable.FindByName<Button>("monthViewButton");
        this.monthViewButton.Clicked += MonthViewButton_Clicked;
        this.yearViewButton = bindable.FindByName<Button>("yearViewButton");
        this.yearViewButton.Clicked += YearViewButton_Clicked;
        this.decadeViewButton = bindable.FindByName<Button>("decadeViewButton");
        this.decadeViewButton.Clicked += DecadeViewButton_Clicked;
        this.centuryViewButton = bindable.FindByName<Button>("centuryViewButton");
        this.centuryViewButton.Clicked += CenturyViewButton_Clicked;
    }
 
    private void MonthViewButton_Clicked(object sender, EventArgs e)
    {
        this.calendar.View = CalendarView.Month;
    }
 
    private void YearViewButton_Clicked(object sender, EventArgs e)
    {
        this.calendar.View = CalendarView.Year;
    }
 
    private void DecadeViewButton_Clicked(object sender, EventArgs e)
    {
        this.calendar.View = CalendarView.Decade;
    }
 
    private void CenturyViewButton_Clicked(object sender, EventArgs e)
    {
        this.calendar.View = CalendarView.Century;
    }
 
    protected override void OnDetachingFrom(ContentPage bindable)
    {
        base.OnDetachingFrom(bindable);
        if (this.monthViewButton != null)
        {
            this.monthViewButton.Clicked -= MonthViewButton_Clicked;
        }
 
        if (this.yearViewButton != null)
        {
            this.yearViewButton.Clicked -= YearViewButton_Clicked;
        }
 
        if (this.decadeViewButton != null)
        {
            this.decadeViewButton.Clicked -= DecadeViewButton_Clicked;
        }
 
        if (this.centuryViewButton != null)
        {
            this.centuryViewButton.Clicked -= CenturyViewButton_Clicked;
        }
 
        this.monthViewButton = null;
        this.yearViewButton = null;
        this.decadeViewButton = null;
        this.centuryViewButton = null;
    }
}

 

Download the complete sample on GitHub

 

Output:

 

Programmatic view navigation using Syncfusion .NET MAUI Calendar

 

Conclusion

 

I hope you enjoyed learning how to navigate to different views programmatically in the .NET MAUI Calendar (SfCalendar).

Refer to our .NET MAUI Calendar’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Calendar documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Calendar and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied