RadCalendar for Vue - Getting Started

This article will guide you through the process of adding a RadCalendar in your application. For more information on how each separate feature of RadCalendar is used, please refer to the dedicated articles.

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-calendar

Adding a RadCalendar to Your Template

Before proceeding, make sure that the NativeScriptUICalendarModule from the nativescript-ui-calendar plugin has been imported in the main JS in your app with the following sentences:

import Vue from 'nativescript-vue';
import CalendarView from 'nativescript-ui-calendar/vue';
Vue.use(CalendarView);

To add a RadCalendar in an Vue template you need to use <RadCalendar></RadCalendar> tag. The following code snippet demonstrates how to display a RadCalendar in your application:

export default {
  name: 'GettingStarted',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadCalendar></RadCalendar>
  </Page>
  `,
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
  data () {
    return {
      title: description
    };
  },
};