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 Vue application

Before proceeding, make sure that the nativescript-ui-calendar/vue module is required inside your application. This module handles the registration of the custom directives and elements required by nativescript-vue.

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:

const MyComponent = {
    template: `
        <Page>
            <RadCalendar></RadCalendar> 
        </Page>
    `
}

RadCalendar must be put in a parent layout panel that does not require from its children to have their own desired size. You should not therefore put RadCalendar in a StackLayout or an auto-sized row within a GridLayout.