RadCalendar: Getting Started

This article will guide you through the process of adding a RadCalendar instance to a page in a {N} application.

Adding a RadCalendar to Your Page

To be able to add a RadCalendar instance to your page you need to define a custom XML namespace as follows xmlns:calendar="nativescript-pro-ui/calendar".

RadCalendar is part of NativeScript UI pro so you need to make sure you have installed Progress NativeScript UI Pro to be able to use it.

After defining the namespace adding a RadCalendar instance to your page is done as follows:

<navigation:ExamplePage
    xmlns:navigation="navigation/example-page"
    xmlns:calendar="nativescript-pro-ui/calendar"
    xmlns="http://www.nativescript.org/tns.xsd">
    <navigation.actionBar>
        <ActionBar title="Getting Started" />
    </navigation.actionBar>
    <calendar:RadCalendar id="calendar" />
</navigation:ExamplePage>

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.

This will initialize a new RadCalendar instance and put it as a direct child of your page:

TelerikUI RadCalendar: Getting Started TelerikUI RadCalendar: Getting Started

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.