Question

我正在使用Angular UI-Calendar在日历上显示一些事件。这些事件在日历上显示正常。但是当我更新任何事件的详细信息时，事件的详细信息实际上已被修改，但未在日历显示中修改（例如：开始）。

最初，在我修改了事件的详细信息后，我进行了页面重新加载以显示已修改的更改，并且它也有效。在该方法中，我有空$scope.events = [];数组，我在检索条目后填充来自DB。

但是现在，我想避免重新加载该页面。因此，一旦从模态窗口修改了事件的详细信息，我使用$scope.events清除了$scope.events = [];数组的内容，然后使用API调用，我再次在{{1}中填充新事件数组。这是正常工作，因为列表视图显示修改后的事件详细信息。但日历本身显示旧条目。例如，如果我从4月11日改为$scope.events到4月13日，则日历显示4月11日的事件，而列表视图显示修改后的数据，即4月13日。使用页面重新加载，更正此事件，即在修改日期（4月13日）显示。

如何在没有页面重新加载的情况下确保在日历上修改事件？

我从数据库中获取新条目后尝试start，但它无法解决问题。

以下是一些代码：

最初，我这样做是为了将数据发送到数据库，然后重新加载页面以检索更新的数据。 calendar.fullCalendar('render');

现在我想避免页面重新加载，所以我做了

$http.put(url,senddata).success(function(data){$window.location.reload();});

上面的代码将$http.put(url,senddata).success(function(data){//$window.location.reload();//sends modified data to server $scope.events = []; //clear events array $http.get(url2).success(function(data){ //fetch new events from server, and push in array $scope.schedule = data; for(var i=0;i<data.length;i++) { $scope.events.push({ idx: data[i].idx, title: data[i].title, description : data[i].description, allDay: false, start: new Date(data[i].start), end: new Date(data[i].end), }); calendar.fullCalendar('render'); //Tried even this, didn't work } });数组中的已修改事件推送到列表视图中可见，但日历仍显示旧事件，直到重新加载页面。

Answer 1

尝试维护相同的数组实例。

而不是：

$scope.events = []

尝试：

$scope.events.slice(0, $scope.events.length);

然后，当您的服务器请求返回时，将每个项目分别添加到现有阵列：

for(var i = 0; i < newEvents.length; ++i) { $scope.events.push(newEvents[i]); }

我建议这样做的原因是因为你所描述的声音，例如日历可能会保留在旧的事件列表中。日历可能不知道更新其引用，因此，让它保持相同的引用，但更改数组的内容。

Answer 2

快速修正Studio4Development的答案。你应该使用“拼接”而不是“切片”。切片返回修剪过的数组。我们想要做的是实际改变原始数组。所以你可以使用：

$scope.events.splice(0, $scope.events.length)

并添加新活动：

$scope.events.push(newEvent)

Answer 3

不知道你是否找到了问题的解决方案，但对我有用的是：

calendar.fullCalendar('refetchEvents');

Answer 4

以下是我在网页上修复类似问题的方法。

查看（简化，请注意使用jade）

div#calendarNugget(ng-show="activeCalendar == 'Nugget'" ui-calendar="uiConfig.calendarNugget" ng-model="eventSources")
div#calendarWillow(ng-show="activeCalendar == 'Willow'" ui-calendar="uiConfig.calendarWillow" ng-model="eventSources2")

<强>控制器：

根据ui-calendar文档，我从一个空数组开始，用于我的事件源。忽略我应该将这些eventSource重命名为商店名称（柳树，金块）

$scope.eventSources = [];
$scope.eventSources2 = [];

然后我调用一个工厂函数来发出一个http请求并从数据库中提取一系列事件。这些事件都有“标题”，“开始”，“结束”属性（确保您的日期格式正确）。他们还有一个“商店”属性，告诉我要将事件添加到哪个日历。

因此，在收到数据后，我创建了两个本地数组，循环接收到的http数据，并按商店将事件分配给这些本地数组。最后，我可以通过调用addEventSource重新呈现具有正确事件数据的日历，该事件根据fullCalendar文档自动重新呈现

它看起来像这个iirc：

function splitShiftsByShop(shifts) {

  var nuggetShifts = [];
  var willowShifts = [];

  for (var i=0; i<shifts.length; i++) {
      if (shifts[i].shop === "Nugget") {

          var nshift = {
            title : shifts[i].employee,
            start : new Date(shifts[i].start),
            end : new Date(shifts[i].end),
            allDay: false
          }

          nuggetShifts.push(nshift);

      } else if (shifts[i].shop === "Willow") {

          var wshift = {
            title : shifts[i].employee,
            start : new Date(shifts[i].start),
            end : new Date(shifts[i].end),
            allDay: false
          }

          willowShifts.push(wshift);
      }
  }

  /*render the calendars again*/
    $('#calendarNugget').fullCalendar('addEventSource', nuggetShifts);
    $('#calendarWillow').fullCalendar('addEventSource', willowShifts);

}

Answer 5

我遇到了一些类似的问题，在清空我的“eventSource”数组（$ scope.eventSources = [$ scope.completedEvents]）并用新事件重新填充事件后，事件没有被重新获取。我首先通过调用'removeEvents'来解决这个问题，

uiCalendarConfig.calendars.calendar.fullcalendar('removeEvents')

这是hackish，所以经过进一步的修补后，我发现当我的子数组被修改时，事件被重新获取，

$scope.completedEvents.splice(0, $scope.completedEvents.length)

在查看源代码后，我可以看到正在监视eventSource数组，但是'refetch'永远不会发生。此外，我从来没有能够得到以下工作，

uiCalendarConfig.calendars.calendar.fullcalendar('refetchEvents')

Answer 6

根据ui-calendar代码，它实际上确实观察了eventSources，但从未实际观察过各个来源。所以做推动，让我们说$ scope.events（$ scope.eventSources = [$ scope.events]）永远不会触发任何东西。

因此将事件推送到$ scope.eventSources [0]

$scope.eventSources[0].splice(0, $scope.eventSources[0].length);
$scope.eventSources[0].push({
 title : title,
 start : start,
 end : end                    
});

Answer 7

正如您所知，完整日历依赖于JQuery。因此，您需要做的就是在您的日历上添加ID，如下所示：

<div id="calendar" ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>

然后当您想要更新日历时，只需致电：

$('#calendar').fullCalendar('refetchEvents')

我也在这方面挣扎了一段时间，这解决了我所有的问题。我希望这对你也有帮助！

古德勒克！

Answer 8

虽然它的反应迟到但希望它可能有所帮助。我正在逐步实施。

您需要维护与前面提到的Studio4Development相同的事件源。

$ scope.events //无需重新初始化
您将从事件数组中删除更新的事件（对于事件数组中的最后一个事件）：

$ scope.events.splice（$ scope.events.length - 1,1）;

对于可能存在于events数组中任何位置的事件，您需要使用以下命令查找其索引：

var eventIndex = $scope.events.map(function (x) { return x.Id; }).indexOf(eventId);

然后你将它从事件数组中删除它：

$scope.events.splice(eventIndex, 1);

接下来，您将再次从API中获取此事件，如下所示：

getEvent（data.Id）;
在回调方法中，您将再次在事件数组中添加事件：

var getSingleEventSuccessCallback = function（event）{ $ scope.events.push（事件）; };

Answer 9

被困在这一段时间了。似乎对我有用的事情变得非常简单

我从谷歌获取日历并运行事件格式化程序功能。在这里我定义了一个新数组，在函数的最后我设置我的eventSource等于新数组。然后我拨打$scope.$apply

    x = []
    for e in events
      x.push(
        title: e.summary
        etc...
      )
    $scope.eventSource = x
    $scope.$apply()

Answer 10

试试这个。它对我有用。

function flushEvents()
{
    $scope.events.splice(0,$scope.events.length);

    for(var i=0; i<$scope.events.length; i++)
    {
        $scope.events.splice(i,1);
    }

}

Answer 11

我发现了这一点，对我有帮助：

$(id_your_div).fullCalendar('removeEvents'); 
$(id_your_div).fullCalendar('refetchEvents');

AngularJS UI日历不会更新日历上的事件

11 个答案: