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
- Single date selection,
- Multi date selection,
- 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.
- Creating new Xamarin.Forms Projects.
- Setting up the plugin for Xamarin.Forms
- Implementing Calendar View in Xamarin.Forms.
Step 1: Creating new Xamarin.Forms Projects
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
- Open Nuget Package Manager against the solution and do 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.
xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
- 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}"/>
- 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 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.
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?); }); } } } } - 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.Forms | https://github.com/rebeccaXam/XamForms.Controls.Calendar |
0 comments:
Please Comment about the Posts and Blog