Showing posts with label Calendar Control. Show all posts

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.