How to Display Two Month Views in the .NET MAUI Calendar (SfCalendar)?
In this article, you'll learn how to display two month views of the Syncfusion® .NET MAUI Calendar control on a single screen by configuring two SfCalendar controls in a layout.
Step 1: Set up two SfCalendar views in a single page with their NavigationDirection set to Vertical.
XAML
<ContentPage.Behaviors> <local:CalendarBehavior /> </ContentPage.Behaviors> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <calendar:SfCalendar x:Name="calendar1" NavigationDirection="Vertical"> </calendar:SfCalendar> <calendar:SfCalendar x:Name="calendar2" Grid.Row="1" NavigationDirection="Vertical"> </calendar:SfCalendar> </Grid>
Step 2: Using the ViewChanged event, update the SfCalendar’s DisplayDate property as shown in the given code sample.
C#
public class CalendarBehavior : Behavior<ContentPage>
{
private SfCalendar calendar1, calendar2;
protected override void OnAttachedTo(ContentPage bindable)
{
base.OnAttachedTo(bindable);
calendar1 = bindable.FindByName<SfCalendar>("calendar1");
calendar2 = bindable.FindByName<SfCalendar>("calendar2");
calendar1.ViewChanged += Calendar1_ViewChanged;
calendar2.ViewChanged += Calendar2_ViewChanged;
}
private void Calendar2_ViewChanged(object sender, CalendarViewChangedEventArgs e)
{
calendar1.DisplayDate = calendar2.DisplayDate.AddMonths(-1);
}
private void Calendar1_ViewChanged(object sender, CalendarViewChangedEventArgs e)
{
calendar2.DisplayDate = calendar1.DisplayDate.AddMonths(1);
}
protected override void OnDetachingFrom(ContentPage bindable)
{
base.OnDetachingFrom(bindable);
if (this.calendar1 != null)
{
calendar1.ViewChanged -= Calendar1_ViewChanged;
}
if (this.calendar2 != null)
{
calendar2.ViewChanged -= Calendar2_ViewChanged;
}
this.calendar1 = this.calendar2 = null;
}
}
Download the complete sample on GitHub
Output
Conclusion
I hope you enjoyed learning how to display two .NET MAUI Calendar month view in a screen (SfCalendar).
You can refer to our .NET MAUI Calendar’s feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Calendar documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI Calendar and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
