Xamarin Form Custom Calendar Control.

Vertical Calendar (new)

Open Below Link For Vertical Calendar

https://xamarincodingtutorial.blogspot.com/2021/02/xamarin-custom-calendar-control.html

Available on NuGet: https://www.nuget.org/packages/CustomCalendarControl/1.0.5

Horizontal Calendar Control - is a cross-platform plugin for Xamarin Forms that allows you to display a single row calendar in your app.

How To Use

Available on NuGet: https://www.nuget.org/packages/HorizontalCalendarControl/1.0.2
Install this Plugin in your Xamarin Form Project.

Implementation Example

<?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:views="clr-namespace:HorizontalCalendar.Views;assembly=HorizontalCalendar"
             x:Class="TestApp.MainPage">
    <StackLayout >
        <views:HorizontalCalendarControl  x:Name="calendarControl"/>
    </StackLayout>
</ContentPage>

UI Customization

UI Customization Property

1. HeaderBackgroundColor: Used to set Header background color.
2. HeaderTextColor: Used to set Header Text Color.
3. LeftRightArrowColor: Used to set left and right arrow color.
4. SelectedDateTextColor: Used to set selected date text color.
5. SelectedDateBackGroundColor: Used to set selected date text background color.

How to display the Selected date

Write Following Code to display the Selected Date.

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

How to get Selected Date

SelectedDateCommand: use this command to get the selected date.

Design Side:

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

Code Behind: (MVVM)

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