以编程方式添加新事件时，RadCalendar 不更新事件

Question

我将 RadCalendar 与 Nativescript-Vue 一起使用，并尝试允许用户手动（通过表单）添加事件，但是一旦事件被推送到 eventSource 中，日历就不会对其做出反应（未显示）在视图中）。如果我重新呈现日历，它会显示新添加的事件。 知道为什么日历不响应此更改并添加新事件吗？

eventSource 绑定了一个名为 calendarEvents 的变量。

<RadCalendar height="100%" width="100%" ref="calendarComponent"
        id="calendar"
        :eventSource="calendarEvents"

        eventsViewMode="Inline"
        selectionMode="Single"
        viewMode="Month"
        transitionMode="Slide"

        @dateSelected="onDateSelected"
        @dateDeselected="onDateDeselected"
        @navigatedToDate="onNavigatedToDate"
        @navigatingToDateStarted="onNavigatingToDateStarted"
        @viewModeChanged="onViewModeChanged"
        @inlineEventSelected="onInlineEventSelected" />

这是将事件添加到日历的方法：

    onAddBookingExternal () {
      this.$showModal(BookingExternal).then((data) => {
        if(data) {
          ...          
          let event = new calendarModule.CalendarEvent('Name', startDate, endDate, false, color)

          this.calendarEvents.push(event)
        }
      })
    },

感谢您的帮助！

Answer 1

这是 RadCalendar 的一个已知问题，您必须提供新的数组引用才能更新 UI。仅将数据推送到同一个数组不会触发更新。

onAddBookingExternal () {
  this.$showModal(BookingExternal).then((data) => {
    if(data) {
      ...          
      let event = new calendarModule.CalendarEvent('Name', startDate, endDate, false, color)

      this.calendarEvents = [...this.calendarEvents, event];
    }
  })
}

Playground Sample

以编程方式添加新事件时，RadCalendar 不更新事件

RadCalendar not updating events when new event added programatically

nativescript

nativescript-vue