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的一个已知问题，您将必须提供一个新的array引用来更新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无法更新事件

1 个答案: