Calendarview in Xamarin.Forms


Introduction

In this tutorial, we will learn how to use Calendarview in Xamarin.Forms. This plugin will helps more when we creating a mobile app for attendance management system.
This Calendar Control is an awesome plugin created by Rebecca and is open sourced in GitHub.
This control offers

  1. Single date selection,
  2. Multi date selection,
  3. Special date selection and date background selection as image and background pattern.

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

Coding Part:

Steps:

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

  1. Creating new Xamarin.Forms Projects.
  2. Setting up the plugin for Xamarin.Forms
  3. Implementing Calendar View in Xamarin.Forms.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.
Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms

  1. Open Nuget Package Manager against the solution and do search for Calendar Control Plugin.
  2. Click Install to install this Plugin against your PCL Project or .NET standard Project.
  3. We need to install this plugin in all client projects.

Step 3: Implementing Calendarview in Xamarin.Forms

  1. 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.
    xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
  2. Then add the calendar control in your page like below
    <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}"/>
  3. Here, SelectedDate is used to select date by default, SpecialDates is used to highlight the sepecial dates like "Holidays", "Festivals", "Appointments" and more.
  4. In this project, we are using MVVM pattern. So, we should create a page model and add this to binding context. After that, add bindable properties for SelectedDate, SpecialDates.
  5. Selection of a particular date can be identified by the "DateCommand". Below you can find the whole code implementations of the PageModel.
    namespace CalendarSample
    {
        public class MainPageModel : BindableObject
        {
            private DateTime? _date;
            public DateTime? Date
            {
                get
                {
                    return _date;
                }
                set
                {
                    _date = value;
                    OnPropertyChanged(nameof(Date));
                }
            }
    
            private ObservableCollection attendances;
            public ObservableCollection 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?);
                    });
                }
            }
        }
    }
  6. You can find the output 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 attendances;
        public ObservableCollection 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.Formshttps://github.com/rebeccaXam/XamForms.Controls.Calendar

Download Code

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

Share this

Related Posts

Previous
Next Post »

2 comments

comments
30 September 2019 at 13:14 delete

It’s my first visit to this blog, it seems that you are fond of writing since so long because the selection of topics is no nice also the information which you have mentioned here is real and impressive. Really appreciate.

Hire Xamarin app Developers

Xamarin Developer India

Reply
avatar
31 August 2020 at 20:03 delete

Serves24 is Best refrigerator repair In Hyderabad We Provided Door Step Repair And Service & Provide best in class. Get 6 months repair guarantee. Book Now just @249/-. at most affordable prices
LG refrigerator repair in Hyderabad
refrigerator repair in Hyderabad
fridges repair Serivces
Samsung refrigerator repair in Hyderabad
IFB washing machine repair in Hyderabad
fridges repairs hyderabad

Reply
avatar

Please Comment about the Posts and Blog