RadCalendar Transitions

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 CalendarTransitionMode 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';
import { isAndroid } from 'tns-core-modules/platform';
const description = 'Transition modes';

export default {
  name: 'TransitionModes',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <GridLayout orientation="vertical" rows="*, auto, auto">
      <RadCalendar
        :transitionMode="transitionMode">
      </RadCalendar>
      <StackLayout row="1" orientation="horizontal" class="m-10">
        <Button text="None"  @tap="onNoneTap"></Button>
        <Button text="Slide"  @tap="onSlideTap"></Button>
        <Button text="Stack"  @tap="onStackTap"></Button>
      </StackLayout>
      <StackLayout v-show="isAndroid" row="2" orientation="horizontal" class="m-10">
        <Button text="Plain"  @tap="onPlainTap"></Button>
        <Button text="Free"  @tap="onFreeTap"></Button>
        <Button text="Combo"  @tap="onComboTap"></Button>
        <Button text="Overlap"  @tap="onOverlapTap"></Button>
      </StackLayout>
      <StackLayout v-show="!isAndroid" row="2" orientation="horizontal" class="m-10">
        <Button text="Flip"  @tap="onFlipTap"></Button>
        <Button text="Fold"  @tap="onFoldTap"></Button>
        <Button text="Float"  @tap="onFloatTap"></Button>
        <Button text="Rotate"  @tap="onRotateTap"></Button>
      </StackLayout>
    </GridLayout>
  </Page>
  `,
  data () {
    return {
      transitionMode: CalendarTransitionMode.None,
      title: description,
      isAndroid: isAndroid
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
    onNoneTap() {
      this.transitionMode = CalendarTransitionMode.None;
    },
    onSlideTap() {
      this.transitionMode = CalendarTransitionMode.Slide;
    },
    onStackTap() {
      this.transitionMode = CalendarTransitionMode.Stack;
    },
    // android
    onPlainTap() {
      this.transitionMode = CalendarTransitionMode.Plain;
    },
    onComboTap() {
      this.transitionMode = CalendarTransitionMode.Combo;
    },
    onOverlapTap() {
      this.transitionMode = CalendarTransitionMode.Overlap;
    },
    onFreeTap() {
        this._transitionMode = CalendarTransitionMode.Free;
    },
    // ios
    onFlipTap() {
        this._transitionMode = CalendarTransitionMode.Flip;
    },
    onFoldTap() {
        this._transitionMode = CalendarTransitionMode.Fold;
    },
    onFloatTap() {
        this._transitionMode = CalendarTransitionMode.Float;
    },
    onRotateTap() {
        this._transitionMode = CalendarTransitionMode.Rotate;
    }
  },
};