CalendarView In Xamarin.Forms

In this article, you will learn about CalendarView in Xamarin.Forms.

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.

    CalendarView In Xamarin.Forms

  • Then, select Android, iOS, and UWP platforms as shown below with the project template as "Blank" and click OK.

    CalendarView In Xamarin.Forms
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.

    CalendarView In Xamarin.Forms
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.         }  
    18.   
    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.         }  
    32.   
    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,

    CalendarView In Xamarin.Forms

Full Code

 
MainPage.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:d="http://xamarin.com/schemas/2014/forms/design"  
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.              xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"  
  7.              xmlns:viewmodels="clr-namespace:CalendarSample"  
  8.              mc:Ignorable="d"  
  9.              x:DataType="viewmodels:MainPageModel"  
  10.              x:Class="CalendarSample.MainPage">  
  11.   
  12.     <StackLayout>  
  13.         <controls:Calendar Padding="10,0,10,0"   
  14.                            SelectedBorderWidth="4"   
  15.                            DisabledBorderColor="Black"  
  16.                            ShowNumberOfWeek="false"  
  17.                            StartDay="Monday"  
  18.                            TitleLabelTextColor="Purple"  
  19.                            TitleLeftArrowTextColor="Blue"  
  20.                            SelectedDate="{Binding Date}"  
  21.                            SpecialDates="{Binding Attendances}"  
  22.                            DateCommand="{Binding DateChosen}"/>  
  23.     </StackLayout>  
  24.   
  25. </ContentPage>  
MainPageModel.cs
  1. using System;  
  2. using System.Collections.ObjectModel;  
  3. using Xamarin.Forms;  
  4.   
  5. namespace CalendarSample  
  6. {  
  7.     public class MainPageModel : BindableObject  
  8.     {  
  9.         private DateTime? _date;  
  10.         public DateTime? Date  
  11.         {  
  12.             get  
  13.             {  
  14.                 return _date;  
  15.             }  
  16.             set  
  17.             {  
  18.                 _date = value;  
  19.                 OnPropertyChanged(nameof(Date));  
  20.             }  
  21.         }  
  22.   
  23.         private ObservableCollection<XamForms.Controls.SpecialDate> attendances;  
  24.         public ObservableCollection<XamForms.Controls.SpecialDate> Attendances  
  25.         {  
  26.             get  
  27.             {  
  28.                 return attendances;  
  29.             }  
  30.             set  
  31.             {  
  32.                 attendances = value;  
  33.                 OnPropertyChanged(nameof(Attendances));  
  34.             }  
  35.         }  
  36.   
  37.         public Command DateChosen  
  38.         {  
  39.             get  
  40.             {  
  41.                 return new Command((obj) =>  
  42.                 {  
  43.                     System.Diagnostics.Debug.WriteLine(obj as DateTime?);  
  44.                 });  
  45.             }  
  46.         }  
  47.     }  
  48. }  
Reference
 
  
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.