CalendarView In Xamarin.Forms

Introduction

In this tutorial, we will learn how to use CalendarView in Xamarin.Forms. This plugin will help more when we are creating a mobile app for the attendance management system.

This Calendar Control is an awesome plugin created by Rebecca and is open-sourced on GitHub. This control offers

single date selection,
multi-date selection,
special date selection and date background selection as image and background pattern.

To know more about it, we will skip into the coding part without delay.

Steps

I have split this part into 3 steps as in the following.

Step 1

Creating new Xamarin.Forms projects.

Step 2

Setting up the plugin for Xamarin.Forms application.

Step 3

Implementing CalendarView in Xamarin.Forms.

Step 1 - Creating new Xamarin.Forms Projects

Create a new project by selecting "New Project". Select Xamarin cross-platform app and click OK.
Then, select Android, iOS, and UWP platforms as shown below with the project template as "Blank" and click OK.

Step 2 - Setting up the plugin for Xamarin.Forms Application

Open NuGet Package Manager against the solution and do a search for Calendar Control plugin.
Click "Install" to install this plugin against your PCL project or .NET Standard Project.
We need to install this plugin in all client projects.

Step 3 - Implementing CalendarView in Xamarin.Forms

After installing the plugin into the project, open your designer page (in my case “MainPage.xaml”) and add the following line for importing the calendar control.
1. xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"

Then, add the calendar control in your page like below.
1. <controls:Calendar Padding="10,0,10,0"
2. SelectedBorderWidth="4"
3. DisabledBorderColor="Black"
4. ShowNumberOfWeek="false"
5. StartDay="Monday"
6. TitleLabelTextColor="Purple"
7. TitleLeftArrowTextColor="Blue"
8. SelectedDate="{Binding Date}"
9. SpecialDates="{Binding Attendances}"
10. DateCommand="{Binding DateChosen}"/>

Here, SelectedDate is used to select date by default, SpecialDates is used to highlight the sepecial dates like "Holidays", "Festivals", "Appointments" and more.
In this project, we are using MVVM pattern. So, we should create a page model and add this to binding the context. After that, add bindable properties for SelectedDate, SpecialDates.
Selection of a particular date can be identified by the "DateCommand". Below you can find the whole code implementations of the PageModel.
1. namespace CalendarSample
2. {
3. public class MainPageModel : BindableObject
4. {
5. private DateTime? _date;
6. public DateTime? Date
7. {
8. get
9. {
10. return _date;
11. }
12. set
13. {
14. _date = value;
15. OnPropertyChanged(nameof(Date));
16. }
17. }
19. private ObservableCollection<XamForms.Controls.SpecialDate> attendances;
20. public ObservableCollection<XamForms.Controls.SpecialDate> Attendances
21. {
22. get
23. {
24. return attendances;
25. }
26. set
27. {
28. attendances = value;
29. OnPropertyChanged(nameof(Attendances));
30. }
31. }
33. public Command DateChosen
34. {
35. get
36. {
37. return new Command((obj) =>
38. {
39. System.Diagnostics.Debug.WriteLine(obj as DateTime?);
40. });
41. }
42. }
43. }
44. }

You can find the ouput of this application below,

Full Code

MainPage.xaml

<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
xmlns:viewmodels="clr-namespace:CalendarSample"
mc:Ignorable="d"
x:DataType="viewmodels:MainPageModel"
x:Class="CalendarSample.MainPage">
<StackLayout>
<controls:Calendar Padding="10,0,10,0"
SelectedBorderWidth="4"
DisabledBorderColor="Black"
ShowNumberOfWeek="false"
StartDay="Monday"
TitleLabelTextColor="Purple"
TitleLeftArrowTextColor="Blue"
SelectedDate="{Binding Date}"
SpecialDates="{Binding Attendances}"
DateCommand="{Binding DateChosen}"/>
</StackLayout>
</ContentPage>

MainPageModel.cs

using System;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace CalendarSample
{
public class MainPageModel : BindableObject
{
private DateTime? _date;
public DateTime? Date
{
get
{
return _date;
}
set
{
_date = value;
OnPropertyChanged(nameof(Date));
}
}
private ObservableCollection<XamForms.Controls.SpecialDate> attendances;
public ObservableCollection<XamForms.Controls.SpecialDate> Attendances
{
get
{
return attendances;
}
set
{
attendances = value;
OnPropertyChanged(nameof(Attendances));
}
}
public Command DateChosen
{
get
{
return new Command((obj) =>
{
System.Diagnostics.Debug.WriteLine(obj as DateTime?);
});
}
}
}
}

Reference

Calendar Control in Xamarin.Forms

Download Code

You can download the code from GitHub. If you have doubts, feel free to post a comment. If you like this article and it is useful to you, do like, share the article & star the repository on GitHub.