NativeScript Core

RadCalendar Event Handling

RadCalendar exposes a set of events which inform you about changes in the state of the component coming as a result of user interactions. By handling these events you can perform actions when a date has been selected, the view mode has been changed, etc. The following events are currently exposed by RadCalendar:

Providing Handlers

Handling RadCalendar's events is done in the familiar {N} way. Here's a XML snippet demonstrating a scenario in which we're subscribing for all exposed events:

<rc:RadCalendar id="calendar" 
   viewModeChanged="onViewModeChanged" />

The event-handlers are defined in the code-behind file associated with the page as shown below:

export function onDateSelected(args: calendarModule.CalendarSelectionEventData) {
    console.log("onDateSelected: " +;

export function onDateDeselected(args: calendarModule.CalendarSelectionEventData) {
    console.log("onDateDeselected: " +;

export function onNavigatedToDate(args: calendarModule.CalendarNavigationEventData) {
    console.log("onNavigatedToDate: " +;

export function onNavigatingToDateStarted(args: any) {
    console.log("onNavigatingToDateStarted: " +;

export function onViewModeChanged(args: calendarModule.CalendarViewModeChangedEventData) {
    console.log("onViewModeChanged: " + args.newValue);

Event Arguments

All events exposed by RadCalendar provide additional information to their handlers that is needed to properly handle them. Here's a brief description of the event arguments coming with each of the events:


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.