AngularJS UI 日历不更新日历上的事件 [英] AngularJS UI-calendar not updating events on Calendar

问题描述

我正在使用 Angular UI-Calendar 在日历上显示一些事件.事件在日历上显示良好.但是当我更新任何事件的详细信息时，事件的详细信息实际上被修改了，但没有在日历显示上修改(例如:开始).

I am using Angular UI-Calendar to show some events on the Calendar. The events are showing fine on the Calendar. But when I update any event's details, the event's detail is actually modified, but not modified on the Calendar display(eg: start).

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

Initially, after I modified the event's details, I did a page reload to display modified changes and it worked too.In that method, I had empty $scope.events = []; array, which I filled after retrieving entries from DB.

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

But now, I want to avoid that page reload. So, once the event's details are modified from modal window, I clear the contents of $scope.events array using $scope.events = []; and then using API call, I fill the new events again in $scope.events array. This is working fine as the List view shows the modified events details. But the Calendar itself shows old entries. e.g if I change start from 11 April to 13 April, the calendar shows event on 11 April whereas List views shows the modified data i.e 13 April. Using Page reload, corrects this i.e event is shown on modified date(13 April).

如何确保在不重新加载页面的情况下也在日历上修改事件?

How can I ensure that the event is modified on Calendar too without a Page reload ?

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

I tried calendar.fullCalendar('render'); after fetching new entries from DB, but it does not solve the Problem.

这里有一些代码:

最初我这样做是为了将数据发送到数据库，然后重新加载页面以检索更新的数据.$http.put(url,senddata).success(function(data){$window.location.reload();});

Initially I did this to send data to DB and then did a page reload to retrieve updated data. $http.put(url,senddata).success(function(data){$window.location.reload();});

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

Now I want to avoid the page reload, so I did

        $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 数组中的修改事件推送到列表视图中可见，但日历仍会显示旧事件，直到页面重新加载.

Above code pushes modified event in event array as visible in List view, but calendar still shows old event until page is reloaded.

推荐答案

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

Try maintaining the same array instance.

而不是这样做:

$scope.events = []

试试:

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

然后当您的服务器请求返回时，将每个项目单独添加到现有数组中:

Then when your server request comes back, add each item individually to the existing array:

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

我建议这样做的原因是因为您所描述的内容听起来像是日历可能保留了旧的事件列表.日历可能不知道更新它的引用，所以相反，让它保持相同的引用但更改数组的内容.

The reason I suggest this is because what you're describing sounds like the calendar might be holding onto the old list of events. The calendar might not know to update its reference, so instead, let it keep the same reference but change the contents of the array.

这篇关于AngularJS UI 日历不更新日历上的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！