How to use range selection on SfCalendar by using MVVM pattern in Xamarin?

3 mins read

SfCalendar allows us to select a range of date in a month by setting SelectionMode property to RangeSelection.

RangeSelection can be achieved by either dragging on the range of dates which we need to select or by taping on to the Start date and End date.

Here we have explained the RangeSelection by using a simple ViewModel sample.

MainPage: XAML

View for SfCalendar and the buttons which will be used to save the selected range.

<?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:local="clr-namespace:SfCalendar"
            xmlns:syncfusion="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
            x:Class="SfCalendar.MainPage">
 
<ContentPage.Padding>
      <OnPlatform x:TypeArguments="Thickness">
          <On Platform="Android, UWP">0</On>
          <On Platform="iOS">0,20,0,0</On>
      </OnPlatform>
  </ContentPage.Padding>
 
  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="2*" />
          <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
     
    <syncfusion:SfCalendar Grid.Row="1" SelectionMode="RangeSelection" x:Name="calendar" ShowNavigationButtons="True" SelectedRange="{Binding SelectedRange,Mode=TwoWay}"   />
  </Grid>
  <Grid Grid.Row="1">
    <Grid.RowDefinitions>
      <RowDefinition Height="50" />
      <RowDefinition Height="*" />
       
    </Grid.RowDefinitions>
    <StackLayout Orientation="Horizontal">
      <Button
          Margin="3"
          Command="{Binding Save}"
          Text="Save Selected Range" />
    </StackLayout>
    <ListView 
        x:Name="list"
        Grid.Row="1" RowHeight="50"
        VerticalOptions="FillAndExpand"
        ItemsSource="{Binding SaveDays}">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <Grid  >
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="auto" />
              </Grid.ColumnDefinitions>
              <Label Text="{Binding Name}" />
              <StackLayout Grid.Column="1" Orientation="Horizontal">
                    <Button           
                    Command="{Binding Load}"
                    CommandParameter="{Binding Source={Reference list}, Path=BindingContext}"
                    Text="Get Range" />
                    <Button 
                    Command="{Binding Delete}"
                    CommandParameter="{Binding Source={Reference list}, Path=BindingContext}"
                    Text="Remove Range" />
              </StackLayout>
            </Grid>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </Grid>
  </Grid>
    
</ContentPage>

Main Page : C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
 
namespace SfCalendar
{
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new ViewModel();
    }
}
}

ViewModel: C#

ViewModel page which contains the binding properties.

 
 
using Syncfusion.SfCalendar.XForms;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using Xamarin.Forms;
namespace SfCalendar
{
public class ViewModel : INotifyPropertyChanged
{
    #region Properties
 
    private SelectionRange _selectrange;
 
    public SelectionRange SelectedRange
    {
        get { return _selectrange; }
        set { _selectrange = value; RaisePropertyChanged("SelectedRange"); }
    }
 
    private ObservableCollection<SavedInfo> _savedays;
 
    public ObservableCollection<SavedInfo> SaveDays
    {
        get { return _savedays; }
        set { _savedays = value; RaisePropertyChanged("SaveDays"); }
    }
 
 
    #endregion
 
    #region Command
 
 
    private Command _savecommand;
 
    public Command Save
    {
        get { return _savecommand; }
        set { _savecommand = value; }
    }
 
    #endregion
 
    public ViewModel()
    {
        Save = new Command(ExecuteSaveDays);
        SaveDays = new ObservableCollection<SavedInfo>();
    }
 
    #region Execute Commands
 
    private void ExecuteSaveDays(object obj)
    {
        SaveSelectedDays();
    }
 
    private void SaveSelectedDays()
    {
        SavedInfo s = new SavedInfo();
 
        if (SelectedRange != null || SelectedRange.StartDate != DateTime.Now.Date)
        {
            s.Name = "Saved Range: \n" + SelectedRange.StartDate.ToString("dd MMM yyyy") + "\n" + SelectedRange.EndDate.ToString("dd MMM yyyy");
        }
 
        s.SaveRange = SelectedRange;
        SaveDays.Add(s);
    }
 
    #endregion
 
    public void RaisePropertyChanged(string name)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
}
}

Model: C#

Model page which contains the range of selected dates in a collection.

 
using Syncfusion.SfCalendar.XForms;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using Xamarin.Forms;
 
namespace SfCalendar
{
public class SavedInfo : INotifyPropertyChanged
{
    private string _name;
 
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
 
    private SelectionRange _saverange;
 
    public SelectionRange SaveRange
    {
        get { return _saverange; }
        set { _saverange = value; }
    }
 
    private Command _load;
 
    public Command Load
    {
        get { return _load; }
        set { _load = value; }
    }
 
    private Command _delete;
 
    public Command Delete
    {
        get { return _delete; }
        set { _delete = value; }
    }
 
    public SavedInfo()
    {
        Load = new Command(ExecuteLoadDays);
        Delete = new Command(ExecuteDelete);
    }
 
    private void ExecuteDelete(object obj)
    {
        if (obj is ViewModel)
        {
            (obj as ViewModel).SaveDays.Remove(this);
        }
    }
 
    private void ExecuteLoadDays(object obj)
    {
        if (obj is ViewModel)
        {
 
            if (SaveRange != null || SaveRange.StartDate != DateTime.Now.Date)
            {
                (obj as ViewModel).SelectedRange = this.SaveRange;
            }
 
        }
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    public void RaisePropertyChanged(string name)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
}
}

Selecting a range of Dates:

Selecting a range of Dates