RadCalendar for Angular: 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 an ngModule in your app as explained here.

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

<StackLayout tkExampleTitle tkToggleNavButton>
    <RadCalendar></RadCalendar>   
</StackLayout>

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.