NativeScript Core

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.

For more information on how to handle selection events, you can take a look at the Event Handling article.

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

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

export function onSingleSelectionTap(args: any) {
    _calendar.selectionMode = CalendarSelectionMode.Single;
    let selectedDate = dateTomorrow();
    _calendar.selectedDate = selectedDate;

export function onMultipleSelectionTap(args: any) {
    _calendar.selectionMode = CalendarSelectionMode.Multiple;
    let firstSelectedDate = dateTomorrow();
    let secondSelectedDate = dateNextWeek();
    _calendar.selectedDates = [firstSelectedDate, secondSelectedDate];

export function onRangeSelectionTap(args: any) {
    _calendar.selectionMode = CalendarSelectionMode.Range;
    let firstSelectedDate = dateTomorrow();
    let lastSelectedDate = dateNextWeek();
    _calendar.selectedDateRange = new DateRange(firstSelectedDate, lastSelectedDate);

export function onClearSelectionTap(args: any) {

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