添加或删除事件时 uiCalendar 不刷新

Question

更改事件源中的元素后我无法让 uiCalendar 更新。

日历在模板中定义为：

<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="EC.calendarEvents" calendar="eventsCalendar"></div>

当我从 EC.calendarEvents 添加或删除元素时，日历不会更新。

我已经尝试了以下所有语句来尝试让日历在修改后刷新 EC.calendarEvents:

uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('render');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('rerenderEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('refetchEvents');

我也试过删除并重新添加源：

uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('removeEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('addEventSource', $scope.EC.calendarEvents);

但这只会导致以下错误出现在控制台中：

TypeError: Cannot read property 'hasTime' of undefined

错误发生在第 12272 行 normalizeEventTimes 函数的 fullcalendar.js 中。

错误行是：

eventProps.allDay = !(eventProps.start.hasTime() || (eventProps.end && eventProps.end.hasTime()));

在此 post 中，他们建议保持对数组的相同引用和 pushing/splicing 进出事件：AngularJS UI-calendar not updating events on Calendar

我也试过了，但没有任何区别。

Answer 1

问题原来是 ui-calendar 期望接收事件的格式不一致。

当控制器加载并且我填充 EC.calendarEvents 时，ui-calendar 期望接收一个数组数组。所以作业看起来像这样：

$scope.EC.calendarEvents = [createCalendarEventsFromCoreEvents(coreEvents)];

但是，每当我想改变 EC.calendarEvents 时，它只能是一个数组，而不是数组的数组。

因此 EC.calendarEvents 的后续更新如下所示：

$scope.EC.calendarEvents = createCalendarEventsFromCoreEvents(filterEvents());
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('removeEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('addEventSource', $scope.EC.calendarEvents);

请注意 createCalendarEventsFromCoreEvents 周围缺少括号 []。

添加或删除事件时 uiCalendar 不刷新

uiCalendar does not refresh when adding or removing events

javascript

angularjs

ui-calendar