Xamarin Blogs ,Xamarin Technology, Xamarin ,Forms ,NET MAUI ,OOPS ,Blogs ,Xamarin: Create your own Calendar control in Xamarin Forms

The Xamarin. Forms Calendar control allows users to easily select single dates like built-in calendar. It provides smooth gestures for navigation between month and year views. The key features include the following:

Ability to disable date selection for certain dates and within a specific date range.
Appearance customization.
Fully Customization as it is not used any DLL, you can enhance this code according to your choice and need.
Some of the Design is created at runtime in C#. Therefore, it is more flexible and extendable.

So Let’s Start with Design File:

TestControl.xaml

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage

x:Class="Test.TestControl"

xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:custom="clr-namespace:CustomControl.CalendarControl”>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<custom:CalendarControl

x:Name="ccControls"

Grid.Row="0"

Grid.Column="0"

Grid.ColumnSpan="4"

BackgroundColor="SkyBlue"

DateClicked="ccControls_DateClicked" />

<BoxView

x:Name="line"

Grid.Row="1"

Grid.RowSpan="24"

Grid.Column="1"

BackgroundColor="Black"

HeightRequest="1"

HorizontalOptions="FillAndExpand"

WidthRequest="1" />

<Label

x:Name="lbltime"

Grid.Row="1"

Grid.Column="2"

Margin="-3,0,-3,0"

FontSize="8"

Text="---12PM" />

<Label

x:Name="lblEvent"

Grid.Row="1"

Grid.Column="3"

FontSize="10"

LineBreakMode="TailTruncation"

Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. " />

<BoxView

x:Name="horizontalline"

Grid.Row="2"

Grid.Column="1"

Grid.ColumnSpan="3"

BackgroundColor="Black"

HeightRequest="1"

HorizontalOptions="FillAndExpand"

WidthRequest="1" />

</Grid>

</StackLayout>

</ContentPage>

Please note below Code will take three parameter and one Event Handler : Month, Year, SelectedDay and Date Clicked Event for getting current date. For details understanding we will check the controls below and understand how this is working.

--------------------------------------------------------------------------------------

<custom:CalendarControl

x:Name="ccControls"

Grid.Row="0"

Grid.Column="0"

Grid.ColumnSpan="4"

BackgroundColor="SkyBlue"

DateClicked="ccControls_DateClicked" />

--------------------------------------------------------------------------------------

Code Behind File :

(TestControl.xaml.cs)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace Test

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class TestControl : ContentPage

{

public TestControl()

{

InitializeComponent();

ccControls.Month = Convert.ToString(DateTime.Now.Month);

ccControls.Year = Convert.ToString(DateTime.Now.Year);

ccControls.SelectedDay = Convert.ToString(DateTime.Now.Day);

}

private async void ccControls_DateClicked(object sender, EventArgs e)

{

var item = (Xamarin.Forms.Button)sender;

await DisplayAlert("Demo Project", "Date Clicked " + item.Text, "Ok");

}

Now check below design for calander controls

CalendarControl.xaml (Design File)

<?xml version="1.0" encoding="UTF-8"?>

<ContentView.Content>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Image.GestureRecognizers>

</Image.GestureRecognizers>

</Image>

<Label.GestureRecognizers>

</Label.GestureRecognizers>

</Label>

<Label.GestureRecognizers>

</Label.GestureRecognizers>

</Label>

<Image.GestureRecognizers>

</Image.GestureRecognizers>

</Image>

</Grid>

</StackLayout>

</StackLayout>

</ScrollView>

<ListView.ItemTemplate>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</StackLayout>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</StackLayout>

</ScrollView>

</ContentView>

</AbsoluteLayout>

</ContentView.Content>

</ContentView>

Code Behind File:

Note: Following Code is also contains some dynamic control which will generate at runtime and bind it with Xamal Code ( x:Name="overlay" )

using System;

using System.Collections.Generic;

using System.Globalization;

using System.Linq;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace CustomControls

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class CalendarControl : ContentView

{

public event EventHandler DateClicked;

public static readonly BindableProperty YearProperty = BindableProperty.Create(

propertyName: "Year",

returnType: typeof(string),

declaringType: typeof(CalendarControl),

defaultValue: "2018",

defaultBindingMode: BindingMode.TwoWay,

propertyChanged: YearPropertyChanged);

public static readonly BindableProperty MonthProperty = BindableProperty.Create(

propertyName: "Month",

returnType: typeof(string),

declaringType: typeof(CalendarControl),

defaultValue: "1",

defaultBindingMode: BindingMode.TwoWay,

propertyChanged: MonthPropertyChanged);

public static readonly BindableProperty SelectedDayProperty = BindableProperty.Create(

propertyName: "SelectedDay",

returnType: typeof(string),

declaringType: typeof(CalendarControl),

defaultValue: "0",

defaultBindingMode: BindingMode.TwoWay,

propertyChanged: SelectedDayPropertyChanged);

public string SelectedDay

{

get { return GetValue(SelectedDayProperty).ToString(); }

set { SetValue(SelectedDayProperty, value); }

}

public string Year

{

get { return GetValue(YearProperty).ToString(); }

set { SetValue(YearProperty, value); }

}

private static void YearPropertyChanged(BindableObject bindable, object oldValue, object newValue)

{

var control = (CalendarControl)bindable;

control.lblYear.Text = newValue.ToString();

control.lblY.Text = control.lblYear.Text;

}

private static void SelectedDayPropertyChanged(BindableObject bindable, object oldValue, object newValue)

{

var control = (CalendarControl)bindable;

control.lblSelectedDay.Text = newValue.ToString();

}

public string Month

{

get { return GetValue(MonthProperty).ToString(); }

set { SetValue(MonthProperty, value); }

}

private static void MonthPropertyChanged(BindableObject bindable, object oldValue, object newValue)

{

var control = (CalendarControl)bindable;

control.lblMonth.Text = newValue.ToString();

control.lblM.Text = control.lblMonth.Text;

}

long SelectedYear;

string SelectedMonth = "";

static int SelectedMonthInt = 0;

string selectedday;

Grid gridCalander;

public CalendarControl()

{

InitializeComponent();

lblM.TextChanged += MonthChanged_TextChanged;

lblY.TextChanged += YearChanged_TextChanged;

lblM.TextChanged += MonthChanged_TextChanged;

lblSelectedDay.TextChanged+= YearChanged_TextChanged;

}

private void YearChanged_TextChanged(object sender, TextChangedEventArgs e)

{

var y = Year;

var m = Month;

selectedday = SelectedDay;

SelectedYear = Convert.ToInt64(y);

lblSelectedMonth.Text = new DateTime(Convert.ToInt32(y), Convert.ToInt32(m), 1).ToString("MMMM");

SelectedMonthInt = Convert.ToInt32(m);

lblYear.Text = Convert.ToString(y);

CreateGridCalander();

CreateDate(selectedday);

}

private void MonthChanged_TextChanged(object sender, TextChangedEventArgs e)

{

var y = Year;

var m = Month;

selectedday = SelectedDay;

SelectedYear = Convert.ToInt64(y);

lblSelectedMonth.Text = new DateTime(Convert.ToInt32(y), Convert.ToInt32(m), 1).ToString("MMMM");

SelectedMonthInt = Convert.ToInt32(m);

lblYear.Text = Convert.ToString(y);

CreateGridCalander();

CreateDate(selectedday);

}

private void CreateGridCalander()

{

#region Grid Calander

gridCalander = new Grid

{

BackgroundColor = Color.LightBlue,

Padding = 0,

ColumnSpacing = 0,

Margin = new Thickness(10, 0, 10, 0),

RowDefinitions =

{