RadCalendar for Angular 2.0: Overview

RadCalendar for NativeScript is based on the corresponding native calendar components from the Telerik UI for iOS and Telerik UI for Android suites. It exposes a unified API covering all major features coming from the native components like:

  • inline events
  • different view modes
  • cells customization
  • selection


View modes

RadCalendar supports four different view modes that are suitable for different application scenarios:

  • Week - displays the dates within one week
  • Month - displays the dates within one month
  • MonthNames - displays the months within a year
  • Year - displays a whole year

For more information about View Modes take a look at the dedicated article: Calendar view modes.

Style customization

RadCalendar has a convenient API for customization of cells and selection indicators. For more information see the dedicated article: Calendar styling .

Calendar transitions

RadCalendar can be customized to animate the transition between different views. For more information take a look at the Transition modes article.

Event source

RadCalendar allows you to define events for a given date by specifying a list of events via it's eventSource property. You can read more about feeding RadCalendar with events in the dedicated article: Populating with data.

Angular directives

When working with RadCalendar with Angular 2 you will need to use the custom Angular 2 directives. Simply use the RadCalendar selector to declare an in the HTML of your Component.
Here is a full list of the available custom Angular 2 RadCalendar directives and components:


Represent the major elements:

Selector Class (more details)
RadCalendar RadCalendarComponent