Transitions: Overview

RadCalendar supports different animations when switching between months, weeks or years. These are also called transitions. Defining a transition is done by setting the transitionMode property to one of the values enlisted by the CalendarTransitionModes enum.

Available transition modes:

  • None - Transitions with gestures are disabled and no animation is applied when transitioning programatically. Available in iOS and Android.
  • Slide - Slide animation is applied when transitioning between views in RadCalendar. Available in iOS and Android.
  • Stack - Stack animation is applied when transitioning between views in RadCalendar. Available in iOS and Android.
  • Flip - Flip animation is applied when transitioning between views in RadCalendar. Available only in iOS.
  • Fold - Fold animation is applied when transitioning between views in RadCalendar. Available only in iOS.
  • Float - Float animation is applied when transitioning between views in RadCalendar. Available only in iOS.
  • Rotate - Rotate animation is applied when transitioning between views in RadCalendar. Available only in iOS.
  • Plain - Allows non inertial scrolling between views in RadCalendar. Available only in Android.
  • Free - Allows inertial scrolling between views in RadCalendar. Available only in Android.
  • Combo - Applies inertial slide animation when transitioning between views in RadCalendar. Available only in Android.
  • Overlap - Views overlap when transitioning in RadCalendar. Available only in Android.
import { CalendarTransitionMode } from 'nativescript-ui-calendar';

export default {
  template: `
  <Page>
    <ActionBar>
      <ActionItem text="None" android.position="popup" @tap="onNoneTap"></ActionItem>
      <ActionItem text="Slide" android.position="popup" @tap="onSlideTap"></ActionItem>
      <ActionItem text="Stack" android.position="popup" @tap="onStackTap"></ActionItem>
      <ActionItem text="Plain" android.position="popup" @tap="onPlainTap"></ActionItem>
      <ActionItem text="Free" android.position="popup" @tap="onFreeTap"></ActionItem>
      <ActionItem text="Combo" android.position="popup" @tap="onComboTap"></ActionItem>
      <ActionItem text="Overlap" android.position="popup" @tap="onOverlapTap"></ActionItem>
    </ActionBar>
    <StackLayout>
      <RadCalendar
        :transitionMode="transitionMode">
      </RadCalendar>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      transitionMode: CalendarTransitionMode.None,
    };
  },
  methods: {
    onNoneTap() {
      this.transitionMode = CalendarTransitionMode.None;
    },
    onSlideTap() {
      this.transitionMode = CalendarTransitionMode.Slide;
    },
    onStackTap() {
      this.transitionMode = CalendarTransitionMode.Stack;
    },
    onPlainTap() {
      this.transitionMode = CalendarTransitionMode.Plain;
    },
    onComboTap() {
      this.transitionMode = CalendarTransitionMode.Combo;
    },
    onOverlapTap() {
      this.transitionMode = CalendarTransitionMode.Overlap;
    },
  },
};