Help guide the NativeScript roadmap! Participate in the community survey. 📝

NativeScript & Vue.JS

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() {
      frameModule.topmost().goBack();
    },
    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