Getting Started with RadCalendar for Angular

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. The code snippets from this section are available as a standalone demo application.

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. For example:

import { NativeScriptUICalendarModule } from "nativescript-ui-calendar/angular";

@NgModule({
    schemas: [NO_ERRORS_SCHEMA],
    imports: [
        ....
        NativeScriptUICalendarModule,
        ....
    ],
    declarations: [
        ....
    ]
})
export class CalendarExamplesModule { }

Demo.

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:

<GridLayout tkExampleTitle tkToggleNavButton>
    <RadCalendar></RadCalendar>   
</GridLayout>

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.