nativescript - Nativescript RadCalendar 获得点击内联事件

Question

在这个项目之后，我设法通过蜜蜂获得了要包含在日历中的事件列表。现在您想知道是否可以单击特定事件以获取开始日期、结束日期和标题，或者是否可以关联一个 ID。我知道有一个 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...

标签： nativescriptnativescript-vue

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属性