RadCalendar Selection Modes

RadCalendar supports the following selection modes exposed by the CalendarSelectionMode enum:

• None - disables the selection in RadCalendar
• Single - allows selection of single date
• Multiple - allows selection of several dates
• Range - allows selection of a date range

To change the selection mode of RadCalendar you should use the selectionMode property and set it to one of the aforementioned values.

Depending on the currect selection mode, you can use the following properties to get/set the selected dates:

• Single selection - selectedDate, which accepts values of type Date.
• Multiple selection - selectedDates, which accepts values of type Date array.
• Range selection - selectedDateRange, which accepts values of type DateRange.

To programmatically clear the selection, you can either set null to the relevant property, or call clearSelection. Here's an example:

onSingleSelectionTap() {
    this._calendar.nativeElement.selectionMode = CalendarSelectionMode.Single;
    let selectedDate = this.dateTomorrow();
    this._calendar.nativeElement.selectedDate = selectedDate;
}

onMultipleSelectionTap() {
    this._calendar.nativeElement.selectionMode = CalendarSelectionMode.Multiple;
    let firstSelectedDate = this.dateTomorrow();
    let secondSelectedDate = this.dateNextWeek();
    this._calendar.nativeElement.selectedDates = [firstSelectedDate, secondSelectedDate];
}

onRangeSelectionTap() {
    this._calendar.nativeElement.selectionMode = CalendarSelectionMode.Range;
    let firstSelectedDate = this.dateTomorrow();
    let lastSelectedDate = this.dateNextWeek();
    this._calendar.nativeElement.selectedDateRange = new DateRange(firstSelectedDate, lastSelectedDate);
}

onClearSelectionTap() {
    this._calendar.nativeElement.clearSelection();
}

The Selection mode functionality could be used in the cases while we use Month or Week viewMode