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:

• dateSelectedEvent - fired when a date has been selected - either programmatically or as a result of end-user interaction
• dateDeselectedEvent - fired when a date has been deselected - either programmatically or as a result of end-user interaction
• inlineEventSelectedEvent - fired when an event, part the list of inline events for a given cell, has been selected
• navigatedToDateEvent - fired when the user navigates to a given date
• navigatingToDateStartedEvent - fired when navigation to a given date is about to happen
• viewModeChangedEvent - fired when the view-mode changes to one of the modes described in view modes
• dayViewEventSelectedEvent - fired when an event, part the list of events in the day view area of the calendar, has been selected
• cellTapEvent - fired when a cell is tapped

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);
}

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:

• dateSelectedEvent and dateDeselectedEvent 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
• inlineEventSelectedEvent 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
• navigatedToDateEvent provides an instance of the CalendarNavigationEventData 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
• dayViewEventSelectedEvent delivers its data by providing an instance of the CalendarDayViewEventSelectedData. 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
• cellTapEvent delivers its data by providing an instance of the CalendarCellTapEventData. This class defines the following properties:
  • eventName - the name of the event
  • object - the sender of the event
  • date - the date of the cell that is tapped

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.

• Event-handlers Example