Skip to content

This repository contains a sample on How to show two months in view in the Syncfusion Xamarin.Forms Calendar (SfCalendar)?

Notifications You must be signed in to change notification settings

SyncfusionExamples/two-calendar-month-view-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How to show two months of Xamarin.Forms Calendar in view (SfCalendar)

You can show the two months of calendar in a single screen using theMonthChangedevent of SfCalendar in Xamarin.Forms.

You can also refer the following article.

https://www.syncfusion.com/kb/11862/how-to-display-two-xamarin-forms-calendar-month-view-in-a-screen-sfcalendar

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 Padding=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

TwoMonthView

About

This repository contains a sample on How to show two months in view in the Syncfusion Xamarin.Forms Calendar (SfCalendar)?

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages