|
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));
}
}
}
Sample link: Download the complete sample from the below given link. |
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
Please explain this code.