Question

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

Answer 1

您可以通过根据 the documentation

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

Nativescript RadCalendar获得点击事件

1 个答案: