Nativescript RadCalendar получить постучал встроенное событие

Question

После этого проекта мне удалось получить список событий для включения в календарь через пчел. Теперь вы хотели бы знать, можете ли вы щелкнуть конкретное событие, чтобы получить дату начала, дату окончания и заголовок, или можно ли связать идентификатор. Я знаю, что есть событие inlineEventSelected, которое возвращает объект с данными события, но я не вижу никаких данных, когда я смотрю на uotput. Что я делаю не так? Введите код здесь

<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

Вы можете предоставить id и любые другие настраиваемые поля, расширив CalendarEventкласс согласно документации

Итак, в вашем случае это может выглядеть следующим образом

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

Затем вы можете использовать свой новый класс для заполнения RadCalendar eventSource свойство