RadCalendar for Angular: Overview

RadCalendar for NativeScript is based on the corresponding native calendar components from the Progress UI for iOS and Progress 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

Features

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
  • Day - displays a timeline for a day with its events

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 you will need to use the custom Angular 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 RadCalendar directives and components:

Components

Represent the major elements:

Selector Class (more details)
RadCalendar RadCalendarComponent