Implementing A Horizontal Calendar In Xamarin.Forms

In this article I will show how easy it is to add a calendar control horizontally to our Xamarin.Forms applications.

Horizontal Calendar Control is a cross-platform plugin for Xamarin.Forms that allows us to display a single row calendar in our applications.Step 1. Create a Blazor Project

How to use

The first thing to do is to install the plugin through the package manager only in the Xamarin.Forms project,

Implementing a Horizontal Calendar in Xamarin.Forms

If you want to do it through the Package Manager console,

Implementing a Horizontal Calendar in Xamarin.Forms

Install-Package HorizontalCalendarControl -Version 1.0.2

Implementation example

Now what must be done is to write (add) the namespace (namespace) in the view that we are going to use the control:


Later we will have to write the following code in the XAML page where we are going to use it:

<StackLayout >
    <views:HorizontalCalendarControl  x:Name="calendarControl" />

User Interface (UI) Customization


  • HeaderBackgroundColor – Used to set the background color of the header.
  • HeaderTextColor – Used to set the color of the header text.
  • LeftRightArrowColor – Used to set the color of the left and right arrow.
  • SelectedDateTextColor – Used to set the text color of the selected date.
  • SelectedDateBackGroundColor – Used to set the background color of the selected date text.

How to display the selected date

In order to obtain the selected date, we must write the following code:

<Label Text="{Binding Source={x:Reference calendarControl},Path=SelectedDate}" />
  <views:HorizontalCalendarControl  x:Name="calendarControl"/>

How to get the selected date

To obtain the selected date we must use this command: SelectedDateCommand


<views:HorizontalCalendarControl SelectedDateCommand="{Binding SelectedDateCommand}" x:Name="calendarControl"  />

Code Behind

private DateTime _selectedDate;
public DateTime SelectedDate {
    get => _selectedDate;
    set => SetProperty(ref _selectedDate, value);
public ICommand SelectedDateCommand => new Command < DateTime > ((selectedDate) => {
    SelectedDate = selectedDate;

And voila, that's it! Now we can make use of the Horizontal Calendar Control.

Result / Output


Implementing a Horizontal Calendar in Xamarin.Forms


Implementing a Horizontal Calendar in Xamarin.Forms


I hope this short article has given you enough information to apply such a control in your Xamarin.Forms applications and see the results on both Android and iOS.

I take advantage of the space to invite you to leave a comment if you want me to give more details about anything in this article.

More Information: HorizontalCalendalControl

Happy Coding!

Similar Articles