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.