Category / Section
How to display two Xamarin.Forms Calendar month view in a screen (SfCalendar)
1 min read
You can show the two months of calendar in a single screen using the MonthChanged event of SfCalendar in Xamarin.Forms.
STEP 1: Create a two calendar view in single page and bind the appointment collection to the DataSource of Sfcalendar.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CalendarXamarin"
xmlns:behavior="clr-namespace:CalendarXamarin.Behavior"
xmlns:calendar="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
x:Class="CalendarXamarin.MainPage">
<ContentPage.Behaviors>
<behavior:CalendarBehavior/>
</ContentPage.Behaviors>
<Grid BackgroundColor="White">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<calendar:SfCalendar x:Name="calendar1"
DataSource="{Binding Appointments}"
NavigationDirection="Vertical" >
</calendar:SfCalendar>
<calendar:SfCalendar x:Name="calendar2"
Grid.Row="1"
DataSource="{Binding Appointments}"
NavigationDirection="Vertical">
<calendar:SfCalendar.MonthViewSettings>
<calendar:MonthViewSettings DayHeight="0"/>
</calendar:SfCalendar.MonthViewSettings>
</calendar:SfCalendar>
</Grid>
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
</ContentPage>
STEP2: By using the MonthChanged event of calendar, the calendar move to date has been updated using the MoveToDate property.
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.MonthChanged += Calendar1_MonthChanged;
calendar2.MonthChanged += Calendar2_MonthChanged;
}
private void Calendar2_MonthChanged(object sender, MonthChangedEventArgs e)
{
calendar1.MoveToDate = calendar2.MoveToDate.AddMonths(-1);
}
private void Calendar1_MonthChanged(object sender, MonthChangedEventArgs e)
{
calendar2.MoveToDate = calendar1.MoveToDate.AddMonths(1);
}
protected override void OnDetachingFrom(ContentPage bindable)
{
base.OnDetachingFrom(bindable);
calendar1.MonthChanged -= Calendar1_MonthChanged;
calendar2.MonthChanged -= Calendar2_MonthChanged;
}
}
Output
|
