Date Selection in UWP Calendar (SfCalendar)

10 May 20216 minutes to read

Dates can be selected in SfCalendar in several ways

Selecting a Single Date

SelectedDate property is used to select a date in SfCalendar.

<input:SfCalendar SelectedDate="12/15/2015"/>
SfCalendar calendar = new SfCalendar();

calendar.SelectedDate = new DateTime(2015, 12, 15);
Dim calendar As New SfCalendar()

calendar.SelectedDate = New Date(2015, 12, 15)

Selecting Multiple Dates

SelectedDates property is used to select one or more dates in SfCalendar. Several range of dates can be selected using this property.

<input:SfCalendar x:Name="calendar"/>
public MainPage()

{
    
   ObservableCollection<DateRange> dateCollection = new  ObservableCollection<DateRange>();
   
   dateCollection.Add(new DateRange(new DateTime(2015, 12, 1), new DateTime(2015, 12, 7)));
   
   dateCollection.Add(new DateRange(new DateTime(2015, 12, 15), new DateTime(2015, 12, 17)));
   
   dateCollection.Add(new DateRange(new DateTime(2015, 12, 27), new DateTime(2015, 12, 31)));
   
   calendar.SelectedDates = dateCollection;
   
}
Public Sub New()

   Dim dateCollection As New ObservableCollection(Of DateRange)()

   dateCollection.Add(New DateRange(New Date(2015, 12, 1), New Date(2015, 12, 7)))

   dateCollection.Add(New DateRange(New Date(2015, 12, 15), New Date(2015, 12, 17)))

   dateCollection.Add(New DateRange(New Date(2015, 12, 27), New Date(2015, 12, 31)))

   calendar.SelectedDates = dateCollection

End Sub

Multiple dates can be selected by

  • Setting SelectedDates programmatically

SfCalendar-img5

  • Clicking on start date and moving the pointer over end date by touch

SfCalendar-img6

DateRange

DateRange represents a range of DateTime between a StartDate and EndDate. DateRange can also be a single date.

Creating DateRange with Single DateTime

Create an instance of DateRange with StartDate. So that it return a collection of DateTime with the StartDate.

DateRange dateRange = new DateRange(new DateTime(2015, 12, 15));
Dim dateRange As New DateRange(New Date(2015, 12, 15))

Creating DateRange with Multiple DateTime

Create an instance of DateRange with StartDate and EndDate. So that it return a collection of DateTime between these two dates.

DateRange dateRange = new DateRange(new DateTime(2015, 12, 15), new DateTime(2015, 12, 17));
Dim dateRange As New DateRange(New Date(2015, 12, 15), New Date(2015, 12, 17))

Date Selection Mode

SelectionMode property determines whether single or multiple dates can be selected in SfCalendar. The values of SelectionMode are

  • Single – Allows to select any one DateTime
  • Multiple – Allows to select one or more DateTime
  • None – Does not allow to select any DateTime
<input:SfCalendar SelectionMode="Single"/>
calendar.SelectionMode = Syncfusion.UI.Xaml.Controls.Input.SelectionMode.Single;
calendar.SelectionMode = Syncfusion.UI.Xaml.Controls.Input.SelectionMode.Single

Setting Display Date

DisplayDate property is used highlight a date which is not a selected date.

<input:SfCalendar DisplayDate="12/19/2015"/>
SfCalendar calendar = new SfCalendar();

calendar.DisplayDate = new DateTime(2015, 12, 19);
Dim calendar As New SfCalendar()

calendar.DisplayDate = New Date(2015, 12, 19)

Notifying Selected Date Changed

SelectionChanged event fires whenever a calendar day button is selected.

<input:SfCalendar x:Name="calendar" SelectionChanged="calendar_SelectionChanged"/>
private void calendar_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

}
Private Sub calendar_SelectionChanged(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)


End Sub