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';

export default {
  template: `
  <Page>
    <ActionBar>
      <ActionItem text="None" android.position="popup" @tap="onNoneTap"></ActionItem>
      <ActionItem text="Single" android.position="popup" @tap="onSingleTap"></ActionItem>
      <ActionItem text="Multiple" android.position="popup" @tap="onMultipleTap"></ActionItem>
      <ActionItem text="Range" android.position="popup" @tap="onRangeTap"></ActionItem>
    </ActionBar>
    <StackLayout>
      <RadCalendar
        :selectionMode="selectionMode">
      </RadCalendar>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      selectionMode: CalendarSelectionMode.None,
    };
  },
  methods: {
    onNoneTap() {
      this.selectionMode = CalendarSelectionMode.None;
    },
    onSingleTap() {
      this.selectionMode = CalendarSelectionMode.Single;
    },
    onMultipleTap() {
      this.selectionMode = CalendarSelectionMode.Multiple;
    },
    onRangeTap() {
      this.selectionMode = CalendarSelectionMode.Range;
    },
  },
};

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