Selection in Windows Forms Calendar (SfCalendar)
26 Apr 202113 minutes to read
The SfCalendar allows you to select one or more dates. The selected date in the calendar can be changed by the mouse, keyboard, and touch interaction.
Change selection
The SfCalendar
control allows you to change the selection by clicking the specific date.
Change selection through keyboard
The selected date of the SfCalendar
control can be changed by the keyboard. Up/Down
and Left/Right
arrow keys help you to change the selection according to the key board interaction.
Change selection programmatically
The selection of the calendar control can be changed programmatically by setting the SelectedDate property. The GoToDate method is used to validate and move the current view to the view which contains the date value passed as argument for GoToDate method. If the date value is not fall between minimum and maximum ranges or blackout dates contains the date, it returns false
. The following code example illustrates the same:
// Move the current view to the date based on given value. Return value as false when the date is not fall within min max range or Blackout dates contains the date.
if (calendar.GoToDate(new DateTime(2018,02,02)))
{
calendar.SelectedDate = new DateTime(2018,02,02);
}
' Move the current view to the date based on given value. Return value as false when the date is not fall within min max range or Blackout dates contains the date.
If calendar.GoToDate(New DateTime(2018, 2, 2)) Then
calendar.SelectedDate = New DateTime(2018, 2, 2)
End If
CellClick event
The CellClick event occurs when clicking a calendar cell.
Event data
The event handler receives an argument of CalendarCellEventArgs type that contains data related to this event. The following CalendarCellEventArgs members provide information specific to this event.
Members | Description |
---|---|
Gets a value that indicates whether the date of cell is SpecialDate in SfCalendar. | |
Gets the CalendarViewType of the cell to draw in SfCalendar; whether it is month, year, decade or century view in SfCalendar. | |
Gets a value that indicates whether the date of cell is SpecialDate in SfCalendar. | |
Gets the StartDate and endDate range values of the clicked cell. | |
Gets a value that indicates whether the date of cell is WeekNumber in SfCalendar. | |
Gets the value of the clicked cell date value. | |
Gets the value of the clicked cell text. |
private void SfCalendar1_CellClick(object sender, Syncfusion.WinForms.Input.Events.CalendarCellEventArgs e)
{
// e.DateRange - Start and end range value of clicked cell
// e.IsBlackoutDate - Indicate whether the date cell is BlackoutDate
// e.IsSpecialDate - Indicate whether the date cell is SpecialDate
// e.IsWeekNumber - Indicate whether the date cell is WeekNumber
// e.Text - Value of clicked cell text
// e.Value - Clicked cell date value
// e.ViewType - Specifies the calendar viewtype
}
Private Sub SfCalendar1_CellClick(ByVal sender As Object, ByVal e As Syncfusion.WinForms.Input.Events.CalendarCellEventArgs)
' e.DateRange - Start and end range value of clicked cell
' e.IsBlackoutDate - Indicate whether the date cell is BlackoutDate
' e.IsSpecialDate - Indicate whether the date cell is SpecialDate
' e.IsWeekNumber - Indicate whether the date cell is WeekNumber
' e.Text - Value of clicked cell text
' e.Value - Clicked cell date value
' e.ViewType - Specifies the calendar viewtype
End Sub
Multiple selection
The SfCalendar
control allows you to select multiple dates when the AllowMultipleSelection property is true. The following code example illustrates how to configure the calendar control to allow multiple date selection:
// Setting to Allow Multiple Selection
calendar.AllowMultipleSelection = true;
' Setting to Allow Multiple Selection
calendar.AllowMultipleSelection = true
Multiple selection through mouse
The SfCalendar
allows you to select multiple dates through the mouse interaction by selecting separate cells while pressing the Ctrl
.
The specific range of dates can be selected by pressing the Shift
. Select a date to set the start date of the range selection and select an end date when pressing the Shift
.
Multiple selection through keyboard
The SfCalendar
allows you to select multiple dates through the keyboard by selecting the cells while pressing Shift + UP/DOWN/LEFT/RIGHT
and Shift + HOME/END
arrow keys.
-
Shift + UP: Selects previous week dates from the selected date.
-
Shift + DOWN: Selects next week dates from the selected date.
-
Shift + RIGHT: Selects next date from the selected date.
-
Shift + LEFT: Selects previous date from the selected date.
-
Shift + HOME: Selects the date range from first day of month to the current selected date.
-
Shift + END: Selects the date range from current selected date to the last date of a month.
Multiple selection programmatically
Multiple dates in the calendar control can be selected programmatically by adding dates to the SelectedDates collection. If the date which passed for adding with selected dates is not fall within minimum or maximum ranges or present in blackout dates, it will not be added to selected dates. The following code example illustrates how to add the selected dates programmatically. In the below code example, blackout dates contain the first date that is added to selected dates. So, except that first added date, other dates are added to selected dates.
calendar.AllowMultipleSelection = true;
calendar.BlackoutDates.Add(new DateTime(2018, 02, 12));
calendar.SelectedDates.Add(new DateTime(2018, 02, 12));
calendar.SelectedDates.Add(new DateTime(2018, 02, 13));
calendar.SelectedDates.Add(new DateTime(2018, 02, 14));
calendar.SelectedDates.Add(new DateTime(2018, 02, 15));
calendar.SelectedDates.Add(new DateTime(2018, 02, 16));
calendar.SelectedDates.Add(new DateTime(2018, 02, 17));
calendar.SelectedDates.Add(new DateTime(2018, 02, 18));
Disable selection
The BlackoutDates
refers the disabled dates that restrict the user from selecting it. List of dates can be provided to set the BlackoutDates for the SfCalendar. The following code example illustrates how to set the BlackoutDates
:
//Setting the Blackout Dates
var weekends = GetDaysBetween(minDateTimeEdit.Value.Value, maxDateTimeEdit.Value.Value).Where(d => d.DayOfWeek == DayOfWeek.Saturday || d.DayOfWeek == DayOfWeek.Sunday);
List<DateTime> time = new List<DateTime>();
time = weekends.ToList();
calendar.BlackoutDates = time;
'Setting the Blackout Dates
Dim weekends = GetDaysBetween(minDateTimeEdit.Value.Value, maxDateTimeEdit.Value.Value).Where(() => { }, ((d.DayOfWeek = DayOfWeek.Saturday) _
OrElse (d.DayOfWeek = DayOfWeek.Sunday)))
Dim time As List(Of DateTime) = New List(Of DateTime)
time = weekends.ToList
calendar.BlackoutDates = time
Minimum datetime
MinDate helps you to restrict the SelectedDate
of calendar falling lesser than the specific date. If the SelectedDate
of calendar is less than the MinDate
, then the SelectedDate
property will be reset to MinDate
. If the new MinDate
value is greater than the MaxDate
, then the MaxDate
will be reset to the MinDate
.
Maximum datetime
MaxDate helps you to restrict the SelectedDate of calendar falling greater than the specific date. If the SelectedDate
of calendar is greater than MaxDate
, then the SelectedDate
property will be reset to MaxDate
. When the MaxDate
is set, if the MinDate
property is greater than the new MaxDate
, then the MinDate
will be reset to the MaxDate
.
Sometimes, the value should be restricted between some date ranges. In that scenario, the MinDate
and MaxDate
help you to select only the dates between these range, and dates other than this range will not be displayed in the calendar.
// Setting the Minimum and Maximum date
Syncfusion.WinForms.Input.SfCalendar calendar = new Syncfusion.WinForms.Input.SfCalendar();
calendar.Value = new DateTime(2018, 1, 12);
calendar.MinDate = new DateTime(2018, 1, 05);
calendar.MaxDate = new DateTime(2018, 1, 25);
' Setting the Minimum and Maximum date
Dim calendar As New Syncfusion.WinForms.Input.SfCalendar ()
calendar.Value = New DateTime(2018, 1, 12)
calendar.MinDate = new DateTime(2018, 1, 05)
calendar.MaxDate = new DateTime(2018, 1, 25)
Handle selection change
Restricts setting the selected date to handle on-demand. While changing the selection, user can restrict the selection change based on the new selected date by handling the SelectionChanging
event.
The SelectionChanging event is invoked before the selected date is changed in the calendar. The SelectionChangingEventArgs
provides the following properties for the SelectionChanging
event:
- OldValue: Old selected date of the SfCalendar.
- NewValue: New selected date of the SfCalendar.
The SelectionChanged event is invoked after the selected date is changed in the calendar. The SelectionChangedEventArgs
provides the following properties for the SelectionChanged
event:
- OldValue: Old selected date of the SfCalendar.
- NewValue: New selected date of the SfCalendar.
- IsMultipleDatesSelected: Indicates whether multiples dates are selected in the calendar or not.
The following code example illustrates how to restrict the selection change on-demand:
// Invoking selection changing event
calendar.SelectionChanging += SfCalendar_SelectionChanging;
// Invoking selection changed event
calendar.SelectionChanged += SfCalendar_SelectionChanged;
// Occurs before the selected date changed in Calendar.
private void SfCalendar_SelectionChanging(SfCalendar sender, Syncfusion.WinForms.Input.Events.SelectionChangingEventArgs args)
{
if(args.NewValue == new DateTime(2018, 1, 16))
args.Cancel = true;
}
// Occurs after the selected date changed in Calendar.
private void SfCalendar_SelectionChanged(object sender, EventArgs e)
{
MessageBox.Show("Selection changed");
}
' Invoking selection changing event
calendar.SelectionChanging = (Me.sfCalendar.SelectionChanging + SfCalendar_SelectionChanging)
' Invoking selection changed event
calendar.SelectionChanged = (Me.sfCalendar.SelectionChanged + SfCalendar_SelectionChanged)
' Occurs before the selected date changed in Calendar.
Private Sub SfCalendar_SelectionChanging(ByVal sender As SfCalendar, ByVal args As Syncfusion.WinForms.Input.Events.SelectionChangingEventArgs)
args.Cancel = true
End Sub
' Occurs after the selected date changed in Calendar.
Private Sub SfCalendar_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
MessageBox.Show("Selection changed")
End Sub
Clear Selection
Selected dates of the calendar control will be cleared when the single date is selected. The calendar control also provides support to remove single date from the selected dates by selecting the already selected date while pressing the CTRL
key.
Clear selected dates programmatically
Selected dates of the calendar control can be removed from the selection by programmatically. The SfCalendar provides ClearSelection method that helps to remove already selected dates and also provides options to select the new date. The following code example illustrates how to remove the selected dates and select new date:
// Clear the selected dates and set the new date as selected date
calendar.ClearSelection(new DateTime(2018, 02, 16));
Disable weekends from selection
Weekends of the calendar can be disabled by providing the Date collection to BlackoutDates. The following code snippet illustrates how to disable weekends from selection:
// disabling the weekends
sfCalendar1.MinDate = new DateTime(2000, 1, 05);
sfCalendar1.MaxDate = new DateTime(2500, 1, 25);
for (var date = sfCalendar1.MinDate; date <= sfCalendar1.MaxDate; date = date.AddDays(1))
{
if (date.DayOfWeek == DayOfWeek.Sunday || date.DayOfWeek == DayOfWeek.Saturday)
sfCalendar1.BlackoutDates.Add(date);
}