XCalendar

A cross-platform plugin for .NET providing a Calendar API and DateTime extensions.

UI controls are available for Xamarin Forms and .NET MAUI, able to run on any platform the respective framework supports.

• Getting Started
• Sample App
• Wiki
• Roadmap
• Nuget Package (.NET)
• Nuget Package (Xamarin Forms)
• Nuget Package (.NET MAUI)

Features

• Ability to use the Calendar from code without referencing a UI framework.
• Ability to use and reference your own models by implementing interfaces like ICalendar, ICalendarDay, or IEvent.
• Ability to set the number of rows/weeks shown or have it be automatic.
• Ability to change the start of the week to any day of the week.
• Ability to select single, multiple or a range of dates.
• Ability to specify a selection direction, for example restricting range selection from start to finish or finish to start
• Ability to restrict navigation to a range of dates and define how the calendar loops.
• Ability to specify your own custom order of days of week, with support for duplicates and non-chronological orders.
• Fully customisable CalendarView with custom controls, templates, and exposed default styles and commands.
• Support for localising text (such as days of the week and day numbers).
• And more!

Roadmap

Features (Xamarin Forms/MAUI)

• Default calendar control that exposes many customisation properties, making the calendar easier to use out-of-the-box instead of requiring usage of templates and styles.
• Default implementation of selection and navigation commands, making the calendar easier to use out-of-the-box.
• Default feature-based calendar controls such as "EventCalendar"/"AppointmentCalendar".
• Some type of time schedule control Discussion 153
• Culture/Locale property for CalendarView
• YearView
• DecadeView
• CenturyView
• Day, Month, and year properties as an alternative to NavigatedDate.

Maui Community Toolkit

Follow the discussion for moving XCalendar into the Maui Community Toolkit here.

Images

Standard Calendar

Custom Days Of Week (Unordered/Duplicates)

Custom Days Of Week (3 Days Of Week)

Custom Week Amount (1 Week)

Custom Week Amount (2 Weeks)

Day Styles

Sample App

The sample app has a flyout menu where you can access the following pages:

Playground Page

A page where you can modify almost every single property of the CalendarView. Perfect for a quick look, showcases, tests and experiments!

Examples Page

A page where you can search for examples of how to use XCalendar.

Examples include:

Event Calendar

Custom DatePicker Dialog

Selection

Using DayView

Customising A Day

Animated Swipable Calendar

Animated.Swipable.Calendar.mp4

Connecting Selected Days

Duolingo Streak Calendar

Official App	Sample App

Basic Usage

.NET

Install the NuGet package

• https://www.nuget.org/packages/XCalendar.Core

Now you can use the Calendar

public Calendar MyCalendar { get; set; } = new Calendar();

Xamarin Forms

Install the NuGet package

• https://www.nuget.org/packages/XCalendar.Forms

Create a Calendar in your ViewModel

public Calendar MyCalendar { get; set; } = new Calendar();

Add the following xmlns to your page or view

xmlns:xc="clr-namespace:XCalendar.Forms.Views;assembly=XCalendar.Forms"

Bind to the properties of your Calendar

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="App1.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:xc="clr-namespace:XCalendar.Forms.Views;assembly=XCalendar.Forms">
    
        <xc:CalendarView
            Days="{Binding MyCalendar.Days}"
            DaysOfWeek="{Binding MyCalendar.DayNamesOrder}"
            NavigatedDate="{Binding MyCalendar.NavigatedDate}"/>

</ContentPage>

Alternatively, these properties can be set directly from code-behind without the use of MVVM.

Youtube Tutorial (Outdated - Uses version 1.2.1 for Xamarin Forms)

.NET MAUI

Install the NuGet package

• https://www.nuget.org/packages/XCalendar.Maui

Create a Calendar in your ViewModel

public Calendar MyCalendar { get; set; } = new Calendar();

Add the following xmlns to your page or view

xmlns:xc="clr-namespace:XCalendar.Maui.Views;assembly=XCalendar.Maui"

Bind to the properties of your Calendar

<ContentPage
    x:Class="MauiApp1.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:xc="clr-namespace:XCalendar.Maui.Views;assembly=XCalendar.Maui">
    
        <xc:CalendarView
            Days="{Binding MyCalendar.Days}"
            DaysOfWeek="{Binding MyCalendar.DayNamesOrder}"
            NavigatedDate="{Binding MyCalendar.NavigatedDate}"/>

</ContentPage>

Alternatively, these properties can be set directly from code-behind without the use of MVVM.

Navigation Overview

Calendar

Navigation can be performed by setting the NavigatedDate property of the Calendar.

Alternatively, navigation can be performed using the Navigate method; it takes a parameter specifying the TimeSpan to navigate by. The Calendar can handle exceptions caused by non-representable dates such as DateTime.MaxValue.AddDays(1).

Variable time units such as months can be obtained by using the'AddMonths' method on a DateTime and subtracting the result from the current date. The 'TryAdd' and 'TrySubtract' methods in DateTimeExtensions are useful if you ever plan to navigate to the bounds of the DateTime struct.

Limiting

Navigation can be limited to a specific range of dates by changing the NavigationLowerBound and NavigationUpperBound properties of the Calendar.

Looping

You can specify the behaviour of the CalendarView when trying to navigate outside the bounds defined by NavigationLowerBound and NavigationUpperBound by changing the NavigationLoopMode property.

CalendarView

The CalendarView does not have navigation built into it by default. Instead, it exposes the BackwardsArrowCommand, BackwardsArrowCommandParameter, ForwardsArrowCommand, and ForwardsArrowCommandParameter which can be used to implement this functionality.

The CalendarView displays its navigation bar using a NavigationView. Its appearance can be changed using the NavigationViewTemplate property of the CalendarView.

Displaying Dates Overview

Calendar

Start of the Week

You can specify what day of the week should be considered as the start by setting the StartOfWeek property of the Calendar.

For Example:

• When StartOfWeek is DayOfWeek.Monday, the first row of February 2022 would be 1st Feb - 7th Feb.
• When StartOfWeek is DayOfWeek.Wednesday, the first row of February 2022 would be 26th Jan - 1st Feb
• When StartOfWeek is DayOfWeek.Sunday, the first row of February 2022 would be 31st Jan - 6th Feb

Rows

You can set how many rows you want to display by changing the Rows property of the Calendar.

Alternatively, the Calendar can automatically set the Rows value to the minimum amount needed to display every week of the NavigatedDate's month. This can be done by setting the AutoRows property of the Calendar to true. You can ensure that AutoRows always uses the highest Rows value required in the year by setting the AutoRowsIsConsistent property of the Calendar to true.

For example, when the start of the week is Monday, these are the values that will be calculated using AutoRows:

Date	Value	Value (AutoRowsIsConsistent)
January 2021	5	6
February 2021	4	6
March 2021	5	6
April 2021	5	6
May 2021	6	6
June 2021	5	6
July 2021	5	6
August 2021	6	6
September 2021	5	6
Ocotober 2021	5	6
November 2021	5	6
December 2021	5	6

Day Of Week Order

The displayed dates are stored in the DayNamesOrder property.

The value of the DayNamesOrder is automatically calculated by the Calendar based on the values of its StartOfWeek and CustomDayNamesOrder:

• First, the Calendar determines the default order of the days of the week using the value of the StartOfWeek property of the Calendar.
• Then, the Calendar creates a default list of dates based on the days of week in the calculated order.
• If the CustomDayNamesOrder property of the Calendar is null, these default dates will be shown.
• If the CustomDayNamesOrder property of the Calendar is not null, the Calendar will cherry-pick values from these default dates, mapping their DayOfWeek to the values specified in the CustomDayNamesOrder property and shows the result.

The CustomDayNamesOrder property supports duplicates and non-chronological orders, but must contain at least one value.

CustomDayNamesOrder Examples

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Monday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	26th Dec, 27th Dec, 28th Dec, 29th Dec, 30th Dec, 31st Dec, 1st Jan
Monday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 29th Dec, 28th Dec, 27th Dec, 26th Dec
Monday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	28th Dec, 30th Dec, 26th Dec, 29th Dec, 31st Dec, 1st Jan, 27th Dec
Monday	Mon, Thu, Sun	26th Dec, 29th Dec, 1st Jan
Monday	Mon, Sun, Tue Tue, Mon	26th Dec, 1st Jan, 27th Dec, 27th Dec, 26th Dec

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Tuesday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	27th Dec, 28th Dec, 29th Dec, 30th Dec, 31st Dec, 1st Jan, 2nd Jan
Tuesday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 29th Dec, 28th Dec, 27th Dec, 2nd Jan
Tuesday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	28th Dec, 30th Dec, 2nd Jan, 29th Dec, 31st Dec, 1st Jan, 27th Dec
Tuesday	Mon, Thu, Sun	2nd Jan, 29th Dec, 1st Jan
Tuesday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 27th Dec, 27th Dec, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Wednesday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 29th Dec, 28th Dec, 3rd Jan, 2nd Jan
Wednesday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	28th Dec, 29th Dec, 30th Dec, 31st Dec, 1st Jan, 2nd Jan, 3rd Jan
Wednesday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	28th Dec, 30th Dec, 2nd Jan, 29th Dec, 31st Dec, 1st Jan, 3rd Jan
Wednesday	Mon, Thu, Sun	2nd Jan, 29th Dec, 1st Jan
Wednesday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Thursday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	29th Dec, 30th Dec, 31st Dec, 1st Jan, 2nd Jan, 3rd Jan, 4th Jan
Thursday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 29th Dec, 4th Jan, 3rd Jan, 2nd Jan
Thursday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	4th Jan, 30th Dec, 2nd Jan, 29th Dec, 31st Dec, 1st Jan, 3rd Jan
Thursday	Mon, Thu, Sun	2nd Jan, 29th Dec, 1st Jan
Thursday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Friday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	30th Dec, 31st Dec, 1st Jan, 2nd Jan, 3rd Jan, 4th Jan, 5th Jan
Friday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 5th Jan, 4th Jan, 3rd Jan, 2nd Jan
Friday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	4th Jan, 30th Dec, 2nd Jan, 5th Jan, 31st Dec, 1st Jan, 3rd Jan
Friday	Mon, Thu, Sun	2nd Jan, 5th Jan, 1st Jan
Friday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Saturday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	31st Dec, 1st Jan, 2nd Jan, 3rd Jan, 4th Jan, 5th Jan, 6th Jan
Saturday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 6th Jan, 5th Jan, 4th Jan, 3rd Jan, 2nd Jan
Saturday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	4th Jan, 6th Jan, 2nd Jan, 5th Jan, 31st Dec, 1st Jan, 3rd Jan
Saturday	Mon, Thu, Sun	2nd Jan, 5th Jan, 1st Jan
Saturday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Sunday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	1st Jan, 2nd Jan, 3rd Jan, 4th Jan, 5th Jan, 6th Jan, 7th Jan
Sunday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 7th Jan, 6th Jan, 5th Jan, 4th Jan, 3rd Jan, 2nd Jan
Sunday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	4th Jan, 6th Jan, 2nd Jan, 5th Jan, 7th Jan, 1st Jan, 3rd Jan
Sunday	Mon, Thu, Sun	2nd Jan, 5th Jan, 1st Jan
Sunday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

Page Start Mode

You can set the date that the page starts on relative to the NavigatedDate by setting the PageStartMode property of the Calendar.

For Example:

• If Rows is set to 1, PageStartMode.FirstDayOfMonth would only ever display the first week of the NavigatedDate's month.
• If Rows is set to 6, PageStartMode.FirstDayOfYear would only ever display the first 6 weeks of the NavigatedDate's year.

Events/Appointments

To add events to the calendar use the calendar's events property. The calendar will add indicators on days that are within the start date and end date of an event. The position and shape of the indicators can be modified by using various properties and templates of a DayView inside the DayTemplate property of the CalendarView.

Localisation

The calendar uses CultureInfo.CurrentCulture for its logic. For example if StartOfWeek has not been set, it will default to CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek.

CalendarView

The bare minimum needed to get the CalendarView working is to set the NavigatedDate, DayNamesOrder, and Days properties of the CalendarView.

Customising days

A day can be customised by setting the CalendarView's DayTemplate property.

If using a DayView, the essential properties you need to set to replicate existing functionality are the IsSelected, IsToday, IsCurrentMonth, and IsInvalid properties. You can view more info on how these states work as well as all the properties in the DayView at the DayView Properties wiki page.

Customising the days container

The container for days can be customised by setting the CalendarView's DaysViewTemplate property.

Customising the days of the week

To customise the look of each day of the week, the DayNameTemplate property of the CalendarView can be used. It is a DataTemplate with a BindingContext of DayOfWeek.

To change the TextColor for example you would put a Label in a DataTemplate and change the Label's TextColor property.

Customising the days of week container

There is also the DayNamesTemplate which lets you modify the container for the days of the week. This is a ControlTemplate.

Localisation

To change the displayed days of the week, change CultureInfo.CurrentUICulture.
To change the displayed month names, change CultureInfo.CurrentCulture.

Best to do this before InitializeComponent() in App.xaml.cs. In the future I may add a culture property to Calendar or CalendarView so that you don't have to set the culture for the entire application.

Date Selection Overview

Calendar

Selection can be performed by changing/modifying the SelectedDates collection.

Alternatively, selection can be performed by calling the ChangeDateSelection method.

Selection can also be performed by setting the RangeSelectionStart and RangeSelectionEnd properties to non-null values. If they are both not null, CommitRangeSelection will be called and they will be set back to null. This mimicks what the ChangeDateSelection method does when the Calendar's SelectionType property is set to SelectionType.Range.

The way in which dates are selected can be changed by setting the Calendar's SelectionType property.

The action taken when calling the ChangeDateSelection or CommitRangeSelection methods can be changed by setting the SelectionAction property.

Different combinations of the SelectionType and SelectionAction result in different behaviours when calling the ChangeDateSelection method.

For example:

• SelectionType.Single + SelectionAction.Replace will achieve traditional single selection.
• SelectionType.Single + SelectionAction.Modify will achieve traditional multiple selection.
• SelectionType.Range + SelectionAction.Replace will achieve traditional range selection.

Additionally, the calendar's SelectionDirection property can be used to control what order dates must be selected in.

For example:

• SelectionType.Range + SelectionAction.Replace + SelectionDirection.StartToEnd will cause the range selection to only be changed by selecting the earlier, then later date.
• SelectionType.Range + SelectionAction.Replace + SelectionDirection.EndToStart will cause the range selection to only be changed by selecting the later, then earlier date.
• SelectionType.Single + SelectionAction.Modify + SelectionDirection.Confined will cause the selected date to require being in between the earliest and latest selected dates.

CalendarView

The CalendarView does not implement selection by default. The easiest way to implement this is to set the CalendarView's DayTemplate to a DayView and set its CurrentMonthCommand, TodayComand, and SelectedCommand to a command that will select the underlying ICalendarDay's date.

To make it easier to replicate default behaviour of calendar days, there is a default style for each state of the DayView in the XCalendar.[Forms/Maui].Styles.DefaultStyles namespace which can be used via a namespace reference in XAML and the {x:Static } markup extension. These styles can also be inherited from to easily customise the look and behaviour of a day in a specific state.

Tips

Reference	Tip
Displaying Dates	A general rule to follow is that your PageStartMode should always be smaller than or equal to the time unit the calendar is navigating.
Displaying Dates	If the amount of rows does not initialise correctly, try setting the AutoRows property before the Rows property.
None	When setting the value of DayNameTemplate, in some cases, the DataTemplate's x:DataType property needs to be set in order for Converters or DataTriggers to work.
Sample App	When copying code from the sample app, watch out for copy-paste errors. Common issues: Copied code references a style defined in the sample app but not your app. Copied code references something in the ViewModel that isn't present in your app's ViewModel. Copied code relies on nuget packages installed in the sample app which aren't present in your app.

Documentation (4.8)

Calendar

Properties

Property	Type	Description
NavigatedDate	DateTime	The date the Calendar is currently navigated to.
TodayDate	DateTime	The date the Calendar will treat as 'Today'.
NavigationLowerBound	DateTime	The inclusive lower bound of the range of dates the NavigatedDate can be set to.
NavigationUpperBound	DateTime	The inclusive upper bound of the range of dates the NavigatedDate can be set to.
NavigationLoopMode	NavigationLoopMode	The behaviour of the calendar when navigating outside the allowed range. NavigationLoopMode.DontLoop: Don't loop. NavigationLoopMode.LoopMinimum: Loop to the upper bound when navigating past the lower bound. NavigationLoopMode.LoopMaximum: Loop to the lower bound when navigating past the upper bound. NavigationLoopMode.LoopMiniumAndMaximum: Loop as defined in both LoopMinimum and LoopMaximum.
SelectionType	SelectionType	Defines how the ChangeDateSelection method processes the selected date. SelectionType.None: Nothing happens. SelectionType.Single: The SelectionAction is performed on the date. SelectionType.Range: Sets the calendar's RangeSelectionStart property to the date if it's null, otherwise sets the calendar's RangeSelectionEnd property if it isn't null, otherwise performs the SelectionAction on the dates between RangeSelectionStart and RangeSelectionEnd inclusive.
SelectionAction	SelectionAction	Defines what happens when a date is selected via the ChangeDateSelection or CommitRangeSelection methods. SelectionAction.Add: The dates will be added to the selection if not already present. SelectionAction.Remove: The dates will be removed from the selection if present. SelectionAction.Modify: Performs both SelectionAction.Add and SelectionAction.Remove on the selection. SelectionAction.Replace: Will replace the current selection with the dates if they are not the same.
SelectionDirection	SelectionDirection	Defines where the newly selected date must be in relation to the earliest and latest selected dates when changing the date selection via the ChangeDateSelection method. If it isn't in the correct place, nothing happens. SelectionDirection.StartToEnd: The newly selected date must be later than or equal to the earliest selected date. SelectionDirection.EndToStart: The newly selected date must be earlier than or equal to the latest selected date. SelectionDirection.Confined: The newly selected date must be in between or equal to the earliest and latest selected date. SelectionDirection.ConfinedReverse: The newly selected date must be outside or equal to the earliest selected date and latest selected date.
RangeSelectionStart	DateTime?	The start of the range of dates to perform selection on inclusive. If RangeSelectionStart and RangeSelectionEnd are not null, CommitRangeSelection will be called and their values will be set back to null.
RangeSelectionEnd	DateTime?	The end of the range of dates to perform selection on inclusive. If RangeSelectionStart and RangeSelectionEnd are not null, CommitRangeSelection will be called and their values will be set back to null.
Rows	int	The number of rows to display. Each row represents one week.
AutoRows	bool	Whether the calendar should automatically determine the minimum number of Rowsneeded to display the month or not.
AutoRowsIsConsistent	bool	Determines if the AutoRows property should display the same number of rows throughout each month in the year.
StartOfWeek	DayOfWeek	The day of the week that will be considered as the start of the week.
DayNamesOrder	ObservableRangeCollection<DayOfWeek>	The order that the days of the week are currently displayed in. If CustomDayNamesOrder is not null, this value is set to it.
CustomDayNamesOrder	ObservableRangeCollection<DayOfWeek>	When this value is not null, DayNamesOrder is set to this.
PageStartMode	PageStartMode	How the calendar will use the NavigatedDate to generate the first date in the page (and therefore the subsequent sequence of dates). PageStartMode.FirstDayOfWeek Use the first date in NavigatedDate's Week. PageStartMode.FirstDayOfMonth Use the first date in the first week of NavigatedDate's Month. PageStartMode.FirstDayOfYear Use the first date in the first week of NavigatedDate's Year.
Days	ObservableRangeCollection<T>	The days currently being displayed by the calendar. Note: Displayed days != displayed dates. For example if DayNamesOrder is "Monday, Monday, Monday Tuesday" and the row is displaying the week of 10th January 2022 - 16th January 2022, there would be 4 days displayed but only 2 dates displayed: 10th January 2022 and 11th January 2022.
Days	ObservableRangeCollection<TEvent> where TEvent : IEvent	The events/appointments of the calendar. The default class and interface for events have 4 properties: Title (string) Description (string) Start Date (DateTime) EndDate(DateTime?) The event will be passed to any ICalendarDay's Events property when their DateTime falls between the StartDate and EndDate. If EndDate is null, any day after the StartDate will have that event.

Events

Event	Description
DateSelectionChanged	This is raised when the SelectedDates collection is changed or modified. It uses the DateSelectionChangedEventArgs class to provide the PreviousSelection and CurrentSelection properties. Note: DateSelectionChanged will still be called if the collection contains the same elements but in a different order. Having duplicates may also cause unexpected behaviour.
DaysUpdating	Raised at the start of the 'UpdateDays' method.
DaysUpdated	Raised at the end of the 'UpdateDays' method.

CalendarView

Properties

Property	Type	Description
NavigatedDate	DateTime	The date used to generate the days that are currently being displayed.
Days	IEnumerable<object>	The days currently being displayed by the calendar. The objects should implement the ICalendarDay interface.
DaysOfWeek	IList<DayOfWeek>	The days of the week currently being displayed by the calendar.
LeftArrowCommand	ICommand	The LeftArrowCommand of the NavigationView.
LeftArrowCommandParameter	object	The LeftArrowCommandParameter of the NavigationView.
RightArrowCommand	ICommand	The RightArrowCommand of the NavigationView.
RightArrowCommandParameter	object	The RightArrowCommandParameter of the NavigationView.
DayTemplate	DataTemplate	How an individual day in Days should be displayed. The DataTemplate's BindingContext will be an object which should implement ICalendarDay.
NavigationViewTemplate	ControlTemplate	How the navigation bar is displayed.
DayNamesTemplate	ControlTemplate	How the DaysOfWeek should be displayed.
DayNamesHeightRequest	double	The HeightRequest of the DayNamesView.
DayNameTemplate	DataTemplate	How an individual DayOfWeek in the DaysOfWeek should be displayed. The DataTemplate's BindingContext will be an ICalendarDay.
DayNameVerticalSpacing	double	The vertical spacing between the DayNames in the DayNamesView.
DayNameHorizontalSpacing	double	The horizontal spacing between the day names in the days of week.
DaysViewTemplate	ControlTemplate	How Days should be displayed.
DaysViewHeightRequest	double	The HeightRequest of the DaysView.

NavigationView

Properties

NavigationView contains all of the properties of a Label.

Property	Type	Description
DateTime	DateTime	The DateTime to be shown.
LeftArrowCommand	ICommand	The command to execute when the left arrow is pressed.
LeftArrowCommandParameter	object	The command parameter used for LeftArrowCommand
RightArrowCommand	ICommand	The command to execute when the right arrow is pressed.
RightArrowCommandParameter	object	The command parameter used for RightArrowCommand
ArrowColor	Color	The colour of the arrows.
ArrowBackgroundColor	Color	The BackgroundColor of the arrows.
ArrowCornerRadius	float	The CornerRadius of the arrows.

DaysView

Properties

Property	Type	Description
Days	IEnumerable<object>	The days currently being displayed by the view. The objects should implement the ICalendarDay interface.
DaysOfWeek	IList<DayOfWeek>	The days of the week currently being displayed by the view.
DayTemplate	DataTemplate	How an individual day in Days should be displayed.

DayView

Properties

The DayView contains all the properties of a Label.

Property	Type	Description
DateTime	DateTime	The date the view represents.
Command	ICommand	The command to execute when pressed.
CommandParameter	object	The command parameter of the command used when pressed.
IsCurrentMonth	bool	The value used to determine if the CalendarDayView can be in the DayState.CurrentMonth or DayState.OtherMonth DayState.
IsToday	bool	The value used to determine if the CalendarDayView can be in the DayState.Today DayState.
IsSelected	bool	The value used to determine if the CalendarDayView can be in the DayState.Selected DayState.
IsInvalid	bool	The value used to determine if the CalendarDayView can be in the DayState.Invalid DayState.
DayState	DayState	The exclusive state the CalendarDayView is in.
AutoSetStyleBasedOnDayState	bool	When set to true (which is its default value), the DayView will update its active style based on any properties that may change the DayState. For example DateTime or IsCurrentMonth
IsDayStateCurrentMonth	bool	Indicates if the CalendarDayView's DayState is DayState.CurrentMonth.
IsDayStateOtherMonth	bool	Indicates if the CalendarDayView's DayState is DayState.OtherMonth.
IsDayStateToday	bool	Indicates if the CalendarDayView's DayState is DayState.Today.
IsDayStateSelected	bool	Indicates if the CalendarDayView's DayState is DayState.Selected.
IsDayStateInvalid	bool	Indicates if the CalendarDayView's DayState is DayState.Invalid.
CurrentMonthStyle	Style	The style to apply to the control when it is in the DayState.CurrentMonth DayState. The default value for this can be accessed in the XCalendar.[Forms/Maui].Styles.DefaultStyles class which can also be referenced in XAML using the {x:Static} markup extension.
OtherMonthStyle	Style	The style to apply to the control when it is in the DayState.OtherMonth DayState. The default value for this can be accessed in the XCalendar.[Forms/Maui].Styles.DefaultStyles class which can also be referenced in XAML using the {x:Static} markup extension.
TodayStyle	Style	The style to apply to the control when it is in the DayState.Today DayState. The default value for this can be accessed in the XCalendar.[Forms/Maui].Styles.DefaultStyles class which can also be referenced in XAML using the {x:Static} markup extension.
SelectedStyle	Style	The style to apply to the control when it is in the DayState.Selected DayState. The default value for this can be accessed in the XCalendar.[Forms/Maui].Styles.DefaultStyles class which can also be referenced in XAML using the {x:Static} markup extension.
InvalidStyle	Style	The style to apply to the control when it is in the DayState.Invalid DayState. The default value for this can be accessed in the XCalendar.[Forms/Maui].Styles.DefaultStyles class which can also be referenced in XAML using the {x:Static} markup extension.
Events	IEnumerable<IEvent>	The events to be shown. The default look is an indicator, the default indicator look only works with events that have a Color property such as the ColoredEvent classes in XCalendar.Forms.Models and XCalendar.Maui.Models.
EventsTemplate	ControlTemplate	The template used to display the events of the Events property.
EventTemplate	DataTemplate	The template used to display an event.
EventWidthRequest	double	The WidthRequest of a displayed event.
EventHeightRequest	double	The HeightRequest of a displayed event.
EventsSpacing	double	The spacing of displayed events.
EventsOrientation	StackOrientation	The orientation of the events. This can either be vertical or horizontal.
AutoEventsViewVisibility	bool	When this is true, the view for events is only shown if there is at least one event. If there are no events, the view is collapsed. When this is false, the view for events is always shown. This is useful if you're using templates and want to use custom logic that depends on the events view always being shown.

DayStates

There are 5 DayStates a CalendarDayView can be in:

• CurrentMonth
• OtherMonth
• Today
• Selected
• Invalid

Using the above screenshot as an example:

• The dates from 30th May - 2nd June are Invalid,
• 6th June is Today
• 15th June, 17th June, 18th June are Selected
• 1st July - 10th July are OtherMonth
• The rest are CurrentMonth.

Extensions

DateTimeExtensions (Unfinished)

Very useful DateTime extension methods for acquiring collections of dates related to a Calendar.

DayOfWeekExtensions

DayOfWeek extension methods for getting different orders of the days of the week.

Method Name	Return Type	Description
GetWeekAsFirst	List<DayOfWeek>	Gets the days of the week using the specified DayOfWeek as the first day of the week.
GetWeekAsLast	List<DayOfWeek>	Gets the days of the week using the specified DayOfWeek as the last day of the week.

StringExtensions

string extension methods making it easier to display calendar content.

Method Name	Return Type	Description
TruncateStringToMaxLength	string	Truncates the string to the specified number of characters.
ToTitleCase	string	Converts the string to title case using the specified CultureInfo.

Converters

StringCharLimitConverter

Truncates the end of the binded string until its length is equal to the int specified in the ConverterParameter. Useful for displaying days of the week.

Cannot convert back.

In this example (Xamarin Forms):

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="XCalendarSample.Views.MainPage"
    xmlns:xcConverters="clr-namespace:XCalendar.Converters;assembly=XCalendar">

    <ContentPage.Resources>
        <xcConverters:StringCharLimitConverter x:Key="StringCharLimitConverter"/>
    </ContentPage.Resources>

    <Label Text="{Binding MyString, Converter={StaticResource StringCharLimitConverter}, ConverterParameter=3}"/>

</ContentPage>

• "Monday" would give "Mon"
• "Tuesday" would give "Tue"
• "Wednesday" would give "Wed"
• "Thu" would give "Thu"
• "Fr" would give "Fr"

IsNullOrEmptyConverter

Determines if the binded value is null or empty.

Returns true if the binded value is null or empty, otherwise, false.

Cannot convert back.

LocalizeDayOfWeekAndCharLimitConverter

Localises a DayOfWeek and truncates the result to the specified length.