Display Modes in Xamarin Calendar (SfCalendar)

Xamarin.Forms calendar control provides 4 different types of views such month, year, decade and century. It allows users to easily select and navigate between all built-in views. This can be achieved by using ViewMode property of SfCalendar.

NOTE

By default calendar control is assigned with month view.

Month view

This displays entire dates of a particular month, by default current month will be displayed on loading. The current date is provided with separate color different from the rest of the dates color in a month. The events availability will be denoted within the cell based on its duration.

The dates in month view can be selected by four ways such as single, multiple, range and multi range selections which can be achieved using SelectionMode. Refer here.

<syncfusion:SfCalendar  x:Name="calendar" ViewMode="MonthView"/>
calendar.ViewMode = ViewMode.MonthView;

Month view in Xamarin.Forms Calendar

Trailing and leading days

The SfCalendar allows you show/hide the days of the next month and previous month in calendar to enhance the appearance. This can be achieved by enabling the ShowLeadingAndTrailingDays property. The following code demonstrates how to hide the leading and trailing dates in calendar.

<syncfusion:SfCalendar  x:Name="calendar" ViewMode="MonthView" 
						ShowLeadingAndTrailingDays="False"/>
calendar.ViewMode = ViewMode.MonthView;
calendar.ShowLeadingAndTrailingDays = False;

Month View in Xamarin.Forms Calendar

NOTE

  • The OnMonthCellLoaded event is triggered for the current month dates.
  • The VisibleDates in the MonthChanged event will return the current month dates.

Enable and disable past dates

The SfCalendar allows you to enable/disable the past dates in MonthView. This can be achieved by changing the EnableDatesInPast property. By default, value of this property is set to true.

<syncfusion:SfCalendar  x:Name="calendar" ViewMode="MonthView" 
						EnableDatesInPast="False"/>
calendar.ViewMode = ViewMode.MonthView;
calendar.EnableDatesInPast = False;

Month View in Xamarin.Forms Calendar

NOTE

The EnableDatesInPast is not applicable for UWP.

Month view customization

You can customize the calendar month view by using MonthViewSettings of SfCalendar.

<syncfusion:SfCalendar x:Name="calendar">
	<syncfusion:SfCalendar.MonthViewSettings>
<syncfusion:MonthViewSettings 
		CurrentMonthBackgroundColor="#800080"
		CurrentMonthTextColor="#ffffff"
		PreviousMonthBackgroundColor="#9895F0"
		PreviousMonthTextColor="#000000"
		DateSelectionColor="#ffffff"
		SelectedDayTextColor="#000000"
		DayHeaderFormat="EEEEE"
		DayFontSize="12"
		DayHeaderFontSize="14"
		DayHeaderBackgroundColor="#fed766"
		SelectionRadius="15"
		TodaySelectionTextColor="Black"
		TodaySelectionBackgroundColor="Green"
		DayHeaderTextColor="Black"
		HeaderBackgroundColor="Pink"
		HeaderFontAttributes="Italic"
		HeaderFontSize="16"
		WeekEndTextColor="#fe4a49"
		WeekEndBackgroundColor="#2ab7ca">
			<syncfusion:MonthViewSettings.HeaderFontFamily>
				<OnPlatform x:TypeArguments="x:String" iOS="Lobster-Regular" Android="Lobster-Regular.ttf" WinPhone="Assets/Lobster-Regular.ttf#Lobster" />
			</syncfusion:MonthViewSettings.HeaderFontFamily>
			<syncfusion:MonthViewSettings.DayHeaderFontFamily>
				<OnPlatform x:TypeArguments="x:String" iOS="Lobster-Regular" Android="Lobster-Regular.ttf" WinPhone="Assets/Lobster-Regular.ttf#Lobster" />
			</syncfusion:MonthViewSettings.DayHeaderFontFamily>
			<syncfusion:MonthViewSettings.DayCellFontFamily>
				<OnPlatform x:TypeArguments="x:String" iOS="Lobster-Regular" Android="Lobster-Regular.ttf" WinPhone="Assets/Lobster-Regular.ttf#Lobster" />
			</syncfusion:MonthViewSettings.DayCellFontFamily>
		</syncfusion:MonthViewSettings>
   </syncfusion:SfCalendar.MonthViewSettings>
</syncfusion:SfCalendar>
SfCalendar calendar = new SfCalendar();    

MonthViewSettings monthViewSettings = new MonthViewSettings();
monthViewSettings.CurrentMonthBackgroundColor = Color.FromHex("#800080");
monthViewSettings.CurrentMonthTextColor = Color.FromHex("#ffffff");
monthViewSettings.PreviousMonthBackgroundColor = Color.FromHex("#9895F0");
monthViewSettings.PreviousMonthTextColor = Color.FromHex("#000000");
monthViewSettings.DateSelectionColor = Color.FromHex("#ffffff");
monthViewSettings.SelectedDayTextColor = Color.FromHex("#000000");
monthViewSettings.DayHeaderFormat = "EEEEE";
monthViewSettings.DayFontSize = 12;
monthViewSettings.DayHeaderFontSize = 14;
monthViewSettings.DayHeaderBackgroundColor = Color.FromHex("#fed766");
monthViewSettings.SelectionRadius = 15;
monthViewSettings.TodaySelectionTextColor = Color.Black;
monthViewSettings.TodaySelectionBackgroundColor = Color.Green;
monthViewSettings.DayHeaderTextColor = Color.Black;
monthViewSettings.DayHeaderFontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf", "Assets/Lobster-Regular.ttf#Lobster");
monthViewSettings.HeaderBackgroundColor = Color.Pink;
monthViewSettings.HeaderFontAttributes = FontAttributes.Italic;
monthViewSettings.HeaderFontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf", "Assets/Lobster-Regular.ttf#Lobster");
monthViewSettings.HeaderFontSize = 16;
monthViewSettings.DayCellFontFamily = Device.OnPlatform("Lobster-Regular", "Lobster-Regular.ttf", "Assets/Lobster-Regular.ttf#Lobster");
monthViewSettings.WeekEndTextColor = Color.FromHex("#fe4a49");
monthViewSettings.WeekEndBackgroundColor = Color.FromHex("#2ab7ca");
monthViewSettings.AgendaSelectedDateColor = Color.Blue;

calendar.MonthViewSettings = monthViewSettings;
this.Content = calendar;

Month View in Xamarin.Forms Calendar

NOTE

  • To disable the current day selection, use TodaySelectionBackgroundColor color as Transparent.
  • DisabledBackgroundColor added while calendar using MinDate, MaxDate and EnableDatesInPast properties.

Month view border color customization

You can customize the border color of calendar month view using MonthViewSettings. The border color of month view can be customized using the BorderColor property and the lines of month cells can be enabled using the CellGridOptions property.

<syncfusion:SfCalendar x:Name="calendar">
	<syncfusion:SfCalendar.MonthViewSettings>
		  <syncfusion:MonthViewSettings BorderColor ="#ff0000" CellGridOptions="Both"/>                      
   </syncfusion:SfCalendar.MonthViewSettings>
</syncfusion:SfCalendar>
SfCalendar calendar = new SfCalendar();    
MonthViewSettings monthViewSettings = new MonthViewSettings();
monthViewSettings.BorderColor = Color.FromHex("#ff0000");
monthViewSettings.CellGridOptions = CellGridOptions.Both;
calendar.MonthViewSettings = monthViewSettings;
this.Content = calendar;

Month view border color in Xamarin.Forms Calendar

Today border color customization

You can customize the today border color of calendar month cell using MonthViewSettings. The border color of current day can be customized using the TodayBorderColor property and it is applicable for both Fill and Circle SelectionShape.

<syncfusion:SfCalendar x:Name="calendar">
	<syncfusion:SfCalendar.MonthViewSettings>
		  <syncfusion:MonthViewSettings TodayBorderColor="#ff0000"/>
   </syncfusion:SfCalendar.MonthViewSettings>
</syncfusion:SfCalendar>
SfCalendar calendar = new SfCalendar();    
MonthViewSettings monthViewSettings = new MonthViewSettings();
monthViewSettings.TodayBorderColor = Color.FromHex("#ff0000");
calendar.MonthViewSettings = monthViewSettings;
this.Content = calendar;

Month view today border color in Xamarin.Forms Calendar

Week view

The number of weeks in the month view can be changed by setting the NumberOfWeeksInView property in SfCalendar. By default, NumberOfWeeksInView starts from current week, and this can be modified using the MoveToDate property of calendar. It also supports all existing features such as FirstDayOfWeek, MinDate, MaxDate, and SelectionMode.

NOTE

  • Week number ranges from 1 to 6. If lesser or greater than these range is considered, NumberOfWeeksInView will be displayed as 6.
  • Inline view considers NumberOfWeeksInView as only 6. For other count, only agenda view will be displayed in calendar.
  • Dynamically changing NumberOfWeeksInView shows the first row of month view dates. It can be handled using the MoveToDate property of calendar
  • ShowLeadingAndTrailingDays is not applicable if the NumberOfWeeksInView is lesser than 6.
<syncfusion:SfCalendar x:Name="calendar" NumberOfWeeksInView="2"/>
SfCalendar calendar = new SfCalendar();
calendar.NumberOfWeeksInView = 2;

Week view in Xamarin.Forms Calendar

Year view

This displays entire dates/month of a particular year, by default current year will be displayed on loading. The Years can be changed by swiping back and forth or Forward and Backward methods. The Months can be navigated quickly by selecting on the particular month in year view.

<syncfusion:SfCalendar  x:Name="calendar" ViewMode="YearView"/>
SfCalendar calendar = new SfCalendar();
calendar.ViewMode=ViewMode.YearView;
this.Content = calendar;

YearView in Xamarin.Forms Calendar

Year view mode

You can set the year view as either date or month using YearViewMode. By default, current year and months will be displayed.

  • If the YearViewMode is date, it will be displays all the months with dates in a particular year view.
  • If the YearViewMode is month, it will be displays all the months in a particular year view.
<syncfusion:SfCalendar  x:Name="calendar" ViewMode="YearView" YearViewMode="Date" NavigationDirection="Vertical"/>
SfCalendar calendar = new SfCalendar();
calendar.ViewMode=ViewMode.YearView;
calendar.YearViewMode = YearViewMode.Date;
this.Content = calendar;

Year view mode in Xamarin.Forms Calendar

NOTE

  • The YearViewMode property is only applicable for calendar in Android and iOS platforms.

Year view customization

We can customize the calendar view in yearView mode by using YearViewSettings property of SfCalendar. Date text color can be modified using DateTextColor. You can also customize the header, month layout in year view’s text color and background color by using the HeaderBackground, LayoutBackground, YearHeaderTextColor properties.

<syncfusion:SfCalendar x:Name="calendar">
	<syncfusion:SfCalendar.YearViewSettings>
		<syncfusion:YearViewSettings 
			LayoutBackground="#ffe4b5"
			DateTextColor="#E6E6FA"
			HeaderBackground="#8B4513"
			YearHeaderTextColor="#FFFFFF"/>
	</syncfusion:SfCalendar.YearViewSettings>
</syncfusion:SfCalendar>
SfCalendar calendar = new SfCalendar();        
YearViewSettings yearViewSettings = new YearViewSettings();
yearViewSettings.LayoutBackground = Color.FromHex("#ffe4b5");
yearViewSettings.DateTextColor = Color.FromHex("#008000");
yearViewSettings.YearHeaderTextColor = Color.FromHex("#ff0000");
calendar.YearViewSettings = yearViewSettings;
this.Content = calendar;

Year View in Xamarin.Forms Calendar

Decade view

This view displays the period of 10 years. By default, current year range of 10 years will be displayed on loading. You can easily navigate between month/year view to decade view by tapping the calendar header. The year can be navigated quickly by selecting a particular year from decade view.

<syncfusion:SfCalendar  x:Name="calendar" ViewMode="Decade" ShowNavigationButtons="True" NavigationDirection="Vertical">
</syncfusion:SfCalendar>
SfCalendar calendar = new SfCalendar();
calendar.ViewMode=ViewMode.Decade;
calendar.ShowNavigationButtons=true;
calendar.NavigationDirection = NavigationDirection.Vertical;
this.Content = calendar;

Decade view in Xamarin.Forms Calendar

Decade view customization

You can customize the decade view of calendar by using YearViewSettings.

<syncfusion:SfCalendar x:Name="calendar" ShowNavigationButtons="True" NavigationDirection="Vertical">
<syncfusion:SfCalendar.YearViewSettings>
	<syncfusion:YearViewSettings 
		LayoutBackground ="#D3D3D3"
		HeaderBackground = "#F2F2F2"
		MonthHeaderTextColor ="#0000FF"
		YearHeaderTextColor="#ff0000"
		MonthLayoutBackground  ="#F2F2F2"/>
</syncfusion:SfCalendar.YearViewSettings>
</syncfusion:SfCalendar>
SfCalendar calendar = new SfCalendar();    
calendar.ShowNavigationButtons=true;   
calendar.NavigationDirection = NavigationDirection.Vertical;    
YearViewSettings yearViewSettings = new YearViewSettings();
yearViewSettings.LayoutBackground = Color.FromHex("#D3D3D3");
yearViewSettings.MonthHeaderTextColor = Color.FromHex("#0000FF");
yearViewSettings.MonthLayoutBackground = Color.FromHex("#F2F2F2"); 
yearViewSettings.YearHeaderTextColor = Color.FromHex("#ff0000");
yearViewSettings.HeaderBackground = Color.FromHex("#F2F2F2");
calendar.YearViewSettings = yearViewSettings;
this.Content = calendar;

Decade view customization in Xamarin.Forms Calendar

Century view

This view displays the period of 100 years. By default, current year range of 100 years will be displayed on loading. You can easily navigate between month/year/decade view to century view by tapping the calendar header. You can easily navigate to decade view by selecting decade years in century view.

<syncfusion:SfCalendar  x:Name="calendar" ViewMode="Century" ShowNavigationButtons="True" NavigationDirection="Vertical">
</syncfusion:SfCalendar>
SfCalendar calendar = new SfCalendar();
calendar.ViewMode=ViewMode.Century;
calendar.ShowNavigationButtons=true;
calendar.NavigationDirection = NavigationDirection.Vertical;
this.Content = calendar;

Century view in Xamarin.Forms Calendar

Century view customization

You can customize the century view of calendar using YearViewSettings.

<syncfusion:SfCalendar x:Name="calendar" ShowNavigationButtons="True" NavigationDirection="Vertical">
	<syncfusion:SfCalendar.YearViewSettings>
		<syncfusion:YearViewSettings 
			LayoutBackground ="#D3D3D3"
			HeaderBackground = "#F2F2F2"
			MonthHeaderTextColor ="#0000FF"
			YearHeaderTextColor="#ff0000"
			MonthLayoutBackground  ="#F2F2F2"/>
	</syncfusion:SfCalendar.YearViewSettings>
</syncfusion:SfCalendar>
SfCalendar calendar = new SfCalendar();   
calendar.ShowNavigationButtons = true;     
calendar.NavigationDirection = NavigationDirection.Vertical;
YearViewSettings yearViewSettings = new YearViewSettings();
yearViewSettings.LayoutBackground = Color.FromHex("#D3D3D3");
yearViewSettings.MonthHeaderTextColor = Color.FromHex("#0000FF");
yearViewSettings.MonthLayoutBackground = Color.FromHex("#F2F2F2"); 
yearViewSettings.YearHeaderTextColor = Color.FromHex("#ff0000");
yearViewSettings.HeaderBackground = Color.FromHex("#F2F2F2");
calendar.YearViewSettings = yearViewSettings;
this.Content = calendar;

Century view customization in Xamarin.Forms Calendar