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

问题描述 投票：12回答：11

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

最初，在我修改了事件的细节之后，我做了一个页面重新加载以显示修改后的更改，它也有效。在那个方法中，我有空的$scope.events = [];数组，我在从DB中检索条目后填充。

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

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

我从DB中获取新条目后尝试了calendar.fullCalendar('render');，但它没有解决问题。

以下是一些代码：

最初我这样做是为了将数据发送到DB，然后重新加载页面以检索更新的数据。 $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



          }

        });

上面的代码将event数组中的修改事件推送到List视图中可见，但是日历仍会显示旧事件，直到重新加载页面。

angularjs calendar fullcalendar
11个回答
22
投票

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

而不是做：

$scope.events = []

尝试：

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

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

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

我之所以建议这是因为您所描述的内容听起来像日历可能会保留在旧的事件列表中。日历可能不知道更新其引用，因此，让它保持相同的引用，但更改数组的内容。

0
投票

试试这个。它对我有用。

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

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

}
0
投票

我找到了这个并帮助了我：

$(id_your_div).fullCalendar('removeEvents'); 
$(id_your_div).fullCalendar('refetchEvents');
18
投票

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

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

并添加新事件：

$scope.events.push(newEvent)
3
投票

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

calendar.fullCalendar('refetchEvents');
3
投票

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

查看（简化，注意使用玉）

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重新渲染具有正确事件数据的日历，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);

}
3
投票

我有一些类似的问题，在清空我的“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')
1
投票

根据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                    
});
0
投票

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

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

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

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

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

祝好运！

0
投票

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

  1. 您需要维护与前面提到的Studio4Development相同的事件源。 $ scope.events //无需重新初始化它
  2. 您将从事件数组中删除更新的事件（对于事件数组中的最后一个事件）： $ 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);
  1. 接下来，您将再次从API获取此事件，如下所示： getEvent（data.Id）;
  2. 在回调方法中，您将再次在事件数组中添加事件： var getSingleEventSuccessCallback = function（event）{$ scope.events.push（event）; };
0
投票

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

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

    x = []
    for e in events
      x.push(
        title: e.summary
        etc...
      )
    $scope.eventSource = x
    $scope.$apply()
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.