🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming webinar.

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: `
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>=
    <GridLayout orientation="vertical" rows="*, auto">
      <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>
  data () {
    return {
      selectionMode: CalendarSelectionMode.None,
      title: description
  methods: {
    onNavigationButtonTap() {
    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