Пользовательский календарь AngularJS не обновляет события в календаре

Ответ 1

Попробуйте сохранить тот же экземпляр массива.

Вместо этого:

$scope.events = []

Try:

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

Затем, когда ваш запрос сервера возвращается, добавьте каждый элемент отдельно в существующий массив:

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

Причина, по которой я предлагаю это, состоит в том, что то, что вы описываете, похоже на то, что календарь может содержать старый список событий. Календар может не знать, чтобы обновить его ссылку, поэтому вместо этого пусть он сохраняет одну и ту же ссылку, но изменяет содержимое массива.

Ответ 2

Просто скорейшая коррекция ответа Studio4Development. Вы должны использовать "сращивание", а не "срез". Slice возвращает обрезанный массив. Мы хотим изменить исходный массив. Таким образом, вы можете использовать:

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

и добавить новые события:

$scope.events.push(newEvent)

Ответ 3

Не знаю, нашли ли вы решение своей проблемы, но то, что сработало для меня, было:

calendar.fullCalendar('refetchEvents');

Ответ 4

Вот как я исправил аналогичную проблему на своей странице.

просмотр (упрощенный, заметьте, используя нефрит)

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 я начинаю с пустого массива для моих источников событий. Игнорируйте, что я должен переименовать эти eventSources в имена магазинов (ива, самородок)

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

Затем я вызываю функцию factory, которая делает HTTP-запрос и вытягивает серию событий из БД. Все события имеют свойства "title", "start", "end" (убедитесь, что ваш формат даты верен). У них также есть свойство "shop", которое сообщает мне, к календарю добавить событие.

Итак, после получения данных я делаю два локальных массива, просматриваю полученные http-данные и назначаю события этим локальным массивам в магазине. Наконец, я могу повторно отобразить календари с соответствующими данными событий , вызвав addEventSource, который автоматически повторно отображает в соответствии с документами fullCalendar

Он выглядит примерно так, как показано на рисунке:

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);

}

Ответ 5

У меня были некоторые аналогичные проблемы, когда события не были повторно отображены после освобождения моего массива eventSource ($ scope.eventSources = [$ scope.completedEvents]) и повторного заполнения его новыми событиями. Я смог сначала преодолеть это, называя "removeEvents",

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

Это хаки, поэтому после дальнейшего возиться я обнаружил, что события были отображены, когда мой дочерний массив изменен,

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

После просмотра источника, я вижу, что массив eventSource просматривается, но "refetch" ​​никогда не возникает. кроме того, я никогда не мог заставить работать,

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

Ответ 6

Согласно ui-календарному коду, он фактически просматривает eventSources, но не фактические отдельные источники. Итак, сделав push, скажем, $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                    
});

Ответ 7

Как вы уже знаете, полный календарь зависит от JQuery. Поэтому все, что вам нужно сделать, это поместить идентификатор в свой календарь следующим образом:

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

а затем, когда вы хотите обновить календарь, просто позвоните:

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

Я тоже боролся с этим в течение некоторого времени, и это устранило все мои проблемы. Надеюсь, это тоже поможет!

Гудлак!

Ответ 8

Хотя это поздний ответ, но надеюсь, что это может помочь некоторым. Я делаю это шаг за шагом.

• Вам нужно будет поддерживать тот же источник событий, что и Studio4Development, упомянутый ранее.

  $scope.events//нет необходимости повторно инициализировать его

• Вы удалите обновленное событие из массива событий, как это (для последнего события в массиве событий):

  $scope.events.splice($ scope.events.length - 1, 1);

Для события, которое может существовать в любом месте массива событий, вам нужно найти его индекс, используя:

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

а затем вы удалите его из массива событий следующим образом:

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

3. Далее вы снова получите это событие из API следующим образом:

   GetEvent (data.Id);

4. а в методе обратного вызова вы снова добавите событие в массив событий:

   var getSingleEventSuccessCallback = function (event) {       $ Scope.events.push(событие);   };

Ответ 9

Застрял на этом некоторое время. То, что, похоже, работает для меня, оказалось довольно простым.

Я извлекаю свой календарь из Google и запускаю функцию форматирования событий. В этом я определяю новый массив, и в конце функции я устанавливаю свой eventSource равным новому массиву. Затем я вызываю $scope.$apply

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

Ответ 10

Попробуйте это. Это сработало для меня.

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

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

}

Ответ 11

Я нашел это, и это помогло мне:

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