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

Я использую Angular UI-Calendar для отображения некоторых событий в календаре. События отображаются в календаре. Но когда я обновляю какие-либо сведения о мероприятии, информация о событии фактически изменяется, но не изменяется на дисплее календаря (например: start).

Изначально, после того, как я изменил детали события, я перезагрузил страницу, чтобы отобразить измененные изменения, и она тоже работала. В этом методе у меня был пустой массив $scope.events = [];, который я заполнил после извлечения записей из БД.

Но теперь я хочу избежать перезагрузки этой страницы. Итак, как только информация о событии изменяется из модального окна, я очищаю содержимое массива $scope.events, используя $scope.events = [];, а затем используя вызов API, я снова заполняю новые события в массиве $scope.events. Это отлично работает, поскольку в представлении "Список" отображаются детали измененных событий. Но сам календарь показывает старые записи. например, если я изменяю start с 11 апреля по 13 апреля, календарь показывает событие 11 апреля, тогда как в представлениях списков показаны измененные данные, т.е. 13 апреля. Используя перезагрузку страницы, корректирует это событие. Это событие отображается в измененную дату (13 апреля).

Как я могу гарантировать, что событие будет изменено в Календаре тоже без перезагрузки страницы?

Я попробовал 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



          }

        });

Выше кода нажимает измененное событие в массиве event как видимое в представлении списка, но календарь по-прежнему показывает старое событие до перезагрузки страницы.

ОТВЕТЫ

Ответ 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);

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

    GetEvent (data.Id);

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

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