Nativescript RadCalendar get tapped inline event - nativescript

Question

following this project , I managed to get a list of events to be included in the calendar through bees.
Now you would like to know if you can click on a specific event to get start date ,end date and title or if it is possible to associate an id.
I know that there is an inlineEventSelected event that returns an object with event data, but I do not see any data when I look at the uotput. What am I doing wrong ?enter code here
<template>
<Page class="page" >
<ActionBar title="Home" class="action-bar"/>
<RadCalendar id="calendar"
:eventSource="calendarEvents"
eventsViewMode="Inline"
selectionMode="Single"
viewMode="Month"
ShowRowHeaders=true
AllowRowHeaderSelectors=true
transitionMode="Slide"
locale="it-IT"
#dateSelected="onDateSelected"
#dateDeselected="onDateDeselected"
#navigatedToDate="onNavigatedToDate"
#navigatingToDateStarted="onNavigatingToDateStarted"
#viewModeChanged="onViewModeChanged"
#inlineEventSelected="onInlineEventSelected"
/>
</Page>
</template>
<script>
import * as calendarModule from 'nativescript-ui-calendar';
import { Color } from 'color';
import * as http from "http";
export default {
methods: {
onInlineEventSelected(args) {
console.log(args);
}
,
onDateSelected(args) {
console.log("onDateSelected: " + args.date);
},
onDateDeselected(args) {
console.log("onDateDeselected: " + args.date);
},
onNavigatedToDate(args) {
console.log("onNavigatedToDate: " + args.date);
},
onNavigatingToDateStarted(args) {
console.log("onNavigatingToDateStarted: " + args.date);
},
onViewModeChanged(args) {
console.log("onViewModeChanged: " + args.newValue);
}
},
created() {
var applicationSettings = require("application-settings");
var user= applicationSettings.getString("username");
var passwordd=applicationSettings.getString("password");
var server=applicationSettings.getString("server");
var cartella=applicationSettings.getString("cartella");
http.getJSON({
url:server+"/names.nsf?Login&username="+user+"&password="+passwordd+"&redirectto="+cartella+"/crm.nsf/Promemoria.xsp/cale/",
method: "GET",
}).then(result => {
// Creating dummy events
let events = [];
let now = new Date();
let startDate;
let endDate;
let event;
for (let i = 1; i < result.length; i++) {
var item=result[i]
startDate = new Date(item.Inizio);
endDate = new Date(item.Fine);
var col=new Color(item.Colore);
event = new calendarModule.CalendarEvent(item.Descr, startDate, endDate,false,col );
events.push(event);
/* if (i % 3 == 0) {
event = new calendarModule.CalendarEvent("second " + i, startDate, endDate, true, colors[i * 5 % (colors.length - 1)]);
events.push(event);
}*/
}
this.calendarEvents = events;
}, error => {
console.log(error.toString());
});
},
data() {
return {
calendarEvents: []
}
},
/*
Event view mode can be one of "None", "Inline" or "Popover"
Selection mode can be one of "None", "Single", "Multiple" or "Range"
View mode can be one of "Week", "Month", "MonthNames", "Year" or "Day"
Available transition modes
http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/Calendar/transition-modes
For styling the calendar, please go through this part in the docs
http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/Calendar/Styling/styling
*/
};
</script>
<style>
.page{margin-top:2%;}
</style>
This is the output of the inlineEventSelected event
JS: { eventName: 'inlineEventSelected',
JS: object:
JS: { _observers:
JS: { dateSelected: [Object],
JS: dateDeselected: [Object],
JS: navigatedToDate: [Object],
JS: navigatingToDateStarted: [Object],
JS: viewModeChanged: [Object],
JS: inlineEventSelected: [Object] },
JS: _onLoadedCalled: true,
JS: _onUnloadedCalled: false,
JS: _cssState:
JS: { view: [Circular],
JS: _onDynamicStateChangeHandler: [Object],
JS: _matchInvalid: false,
JS: _appliedSelectorsVersion: 200000,
JS: _match: [Object],
JS: _appliedChangeMap: {},
JS: _appliedPropertyValues: {},
JS: _playsKeyframeAnimations: false },
JS: pseudoClassAliases: { highlighted: [Object] },
JS: cssClasses: {},
JS: cssPseudoClasses: {},
JS: _domId: 5,
JS: _style: { _observers: {}, view: [Circular] },
JS: _gestureObservers: {},
JS: _androidViewId: 2,
JS: __vue_element_ref__:
JS: { nodeType: 1,
JS: _tagName: 'nativeradcalendar',
JS: parentNode: [Object],
JS: childNodes: [Object],
JS: prevSib...

Answer 1

You can provide an id and any other custom fields by extending CalendarEvent class according to the documentation
So in your case, it could look as follows
export class CustomEvent extends CalendarEvent {
id: number;
constructor(id: number, title: string, startDate: Date, endDate: Date, isAllDay?: boolean, eventColor?: Color) {
super(title, startDate, endDate, isAllDay, eventColor);
this.id = id;
}
}
Then you can use your new class to populate the RadCalendar's eventSource property