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,

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

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:

xmlns:views="clr-namespace:HorizontalCalendar.Views;assembly=HorizontalCalendar"

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" />
</StackLayout>

User Interface (UI) Customization

Properties

• 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.

<views:HorizontalCalendarControl 
    HeaderBackgroundColor="LightBlue"
    HeaderTextColor="Black"
    SelectedDateTextColor="LightBlue" 
    SelectedDateBackGroundColor="Black" 
    LeftRightArrowColor="Black"/>

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

XAML

<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

Android

iOS

Summary

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!