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.

import { CalendarSelectionMode } from 'nativescript-ui-calendar';

const description = 'Selection modes';

export default {
  name: 'SelectionModes',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>=
    </ActionBar>
    <GridLayout orientation="vertical" rows="*, auto">
      <RadCalendar
        :selectionMode="selectionMode">
      </RadCalendar>
      <StackLayout orientation="horizontal" row="1" class="m-10">
        <Button text="None" @tap="onNoneTap"></Button>
        <Button text="Single" @tap="onSingleTap"></Button>
        <Button text="Multiple" @tap="onMultipleTap"></Button>
        <Button text="Range" @tap="onRangeTap"></Button>
      </StackLayout>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      selectionMode: CalendarSelectionMode.None,
      title: description
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
    onNoneTap() {
      this.selectionMode = CalendarSelectionMode.None;
    },
    onSingleTap() {
      this.selectionMode = CalendarSelectionMode.Single;
    },
    onMultipleTap() {
      this.selectionMode = CalendarSelectionMode.Multiple;
    },
    onRangeTap() {
      this.selectionMode = CalendarSelectionMode.Range;
    },
  },
};

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.$refs.calendar.nativeView.selectionMode = CalendarSelectionMode.Single;
  let selectedDate = this.dateTomorrow();
  this.$refs.calendar.nativeView.selectedDate = selectedDate;
},
onMultipleSelectionTap() {
    this.$refs.calendar.nativeView.selectionMode = CalendarSelectionMode.Multiple;
    let firstSelectedDate = this.dateTomorrow();
    let secondSelectedDate = this.dateNextWeek();
    this.$refs.calendar.nativeView.selectedDates = [firstSelectedDate, secondSelectedDate];
},
onRangeSelectionTap() {
    this.$refs.calendar.nativeView.selectionMode = CalendarSelectionMode.Range;
    let firstSelectedDate = this.dateTomorrow();
    let lastSelectedDate = this.dateNextWeek();
    this.$refs.calendar.nativeView.selectedDateRange = new DateRange(firstSelectedDate, lastSelectedDate);
},
onClearSelectionTap() {
    this.$refs.calendar.nativeView.clearSelection();
},

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