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" 
   dateSelected="onDateSelected"
   dateDeselected="onDateDeselected"
   navigatedToDate="onNavigatedToDate"
   navigatingToDateStarted="onNavigatingToDateStarted"
   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: " + args.date);
}

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

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

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

export function onViewModeChanged(args: calendarModule.CalendarViewModeChangedEventData) {
    console.log("onViewModeChanged: " + args.newValue);
}
function onDateSelected(args) {
    console.log("onDateSelected: " + args.date);
}
exports.onDateSelected = onDateSelected;
function onDateDeselected(args) {
    console.log("onDateDeselected: " + args.date);
}
exports.onDateDeselected = onDateDeselected;
function onNavigatedToDate(args) {
    console.log("onNavigatedToDate: " + args.date);
}
exports.onNavigatedToDate = onNavigatedToDate;
function onNavigatingToDateStarted(args) {
    console.log("onNavigatingToDateStarted: " + args.date);
}
exports.onNavigatingToDateStarted = onNavigatingToDateStarted;
function onViewModeChanged(args) {
    console.log("onViewModeChanged: " + args.newValue);
}
exports.onViewModeChanged = onViewModeChanged;

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:

  • dateSelected and dateDeselected deliver their arguments in the form of an instance of CalendarSelectionEventData class. This class exposes the following properties:
    • eventName - the name of the event
    • date - the selected date
    • object - the object that fires the event
  • inlineEventSelected delivers its data by providing an instance of the CalendarInlineEventSelectedData. This class defines the following properties:
    • eventName - the name of the event
    • object - the sender of the event
    • eventData - an instance of the CalendarEvent class representing the selected event
  • navigatedToDate provides an instance of the CalendarNavigationEventData class with the following properties:
    • eventName - the name of the event
    • object - the sender of the event
    • date - the date the navigation leads to

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.