web-dev-qa-db-fra.com

AngularJS UI-calendar ne met pas à jour les événements sur le calendrier

J'utilise Angular UI-Calendar pour afficher certains événements dans le calendrier. Les événements montrent bien sur le calendrier. Mais lorsque je mets à jour les détails d'un événement, ceux-ci sont en réalité modifiés, mais pas dans l'affichage du calendrier (par exemple, début).

Initialement, après avoir modifié les détails de l'événement, j'ai rechargé une page pour afficher les modifications modifiées. Cela fonctionnait aussi. Dans cette méthode, j'avais un tableau $scope.events = []; vide, que j'ai rempli après avoir extrait des entrées de la base de données.

Mais maintenant, je veux éviter ce rechargement de page. Ainsi, une fois que les détails de l'événement sont modifiés à partir de la fenêtre modale, j'efface le contenu du tableau $scope.events à l'aide de $scope.events = [];, puis de l'appel de l'API. Je remplis à nouveau les nouveaux événements dans le tableau $scope.events. Cela fonctionne correctement car la vue Liste affiche les détails des événements modifiés. Mais le calendrier lui-même montre les anciennes entrées. Par exemple, si je change start du 11 avril au 13 avril, le calendrier affiche l'événement le 11 avril, tandis que les vues de liste affichent les données modifiées, c'est-à-dire le 13 avril. En utilisant Rechargement de page, corrige cet événement i.e est affiché à la date modifiée (13 avril). 

Comment puis-je m'assurer que l'événement est également modifié sur le calendrier sans rechargement de page?

J'ai essayé calendar.fullCalendar('render'); après avoir extrait de nouvelles entrées de la base de données, mais cela ne résout pas le problème.

Voici quelques codes: 

Au départ, j’avais fait cela pour envoyer des données à la base de données, puis j’ai rechargé une page pour récupérer les données mises à jour. $http.put(url,senddata).success(function(data){$window.location.reload();});

Maintenant, je veux éviter le rechargement de page, alors je l'ai fait 

        $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



          }

        });

Le code ci-dessus pousse l'événement modifié dans le tableau event comme visible dans la vue Liste, mais le calendrier affiche toujours l'ancien événement jusqu'à ce que la page soit rechargée.

angularjscalendarfullcalendar
12
Aniket Sinha

Essayez de maintenir la même instance de tableau.

Au lieu de faire:

$scope.events = []

Essayer:

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

Ensuite, lorsque votre demande de serveur revient, ajoutez chaque élément individuellement au tableau existant:

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

La raison pour laquelle je suggère que c'est parce que ce que vous décrivez ressemble à du calendrier pourrait tenir sur l'ancienne liste d'événements. Il est possible que le calendrier ne sache pas mettre à jour sa référence. Laissez-le donc conserver la même référence, mais modifiez le contenu du tableau.

22
Studio4Development

Juste une correction rapide à la réponse de Studio4Development. Vous devriez utiliser "splice" pas "slice". Slice renvoie le tableau coupé. Ce que nous voulons faire, c'est modifier le tableau d'origine. Pour que vous puissiez utiliser:

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

et pour ajouter de nouveaux événements:

$scope.events.Push(newEvent)
18
Emeka

Voici comment j'ai résolu un problème similaire sur ma page.

view (simplifié, note utilisant 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")

manette :

Conformément à la documentation ui-calendar, je commence par un tableau vide pour mes sources d'événements. Ignorez le fait que je devrais probablement renommer ces eventSources en quelque chose à propos des noms de boutique (willow, nugget)

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

J'appelle ensuite une fonction factory qui émet une requête http et extrait une série d'événements de la base de données. Les événements ont tous les propriétés "title", "start", "end" (assurez-vous que votre format de date est correct). Ils ont également une propriété "shop", qui me dit à quel calendrier ajouter l'événement. 

Ainsi, après avoir reçu les données, je crée deux tableaux locaux, parcourt les données http reçues et assigne les événements à ces tableaux locaux par boutique. Enfin, je peux re-rendre les calendriers avec les données d'événement appropriées en appelant addEventSource, qui restitue automatiquement le rendu conformément à la documentation complète du calendrier

Cela ressemble à quelque chose dans les lignes de ce 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
AlexDelPiero

Je ne sais pas si vous avez trouvé la solution à votre problème, mais ce qui a fonctionné pour moi a été:

calendar.fullCalendar('refetchEvents');
3
PPR

J'avais des problèmes similaires où des événements n'étaient pas récupérés après avoir vidé mon tableau "eventSource" ($ scope.eventSources = [$ scope.completedEvents]) et l'avoir repeuplé avec de nouveaux événements. J'ai pu surmonter cela au début en appelant 'removeEvents',

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

C'est du hack, donc après avoir bricolé davantage, j'ai découvert que les événements étaient récupérés lorsque mon tableau enfant était modifié,

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

Après avoir examiné la source, je constate que le tableau eventSource est surveillé, mais que la "récupération" n’a jamais lieu. de plus, je n'ai jamais réussi à obtenir les éléments suivants au travail,

uiCalendarConfig.calendars.calendar.fullcalendar('refetchEvents')
3
Ryan Ruppert

Selon le code ui-calendar, il surveille effectivement eventSources mais jamais les sources individuelles réelles. Donc, faire un Push to, disons $ scope.events ($ scope.eventSources = [$ scope.events]), ne déclenchera jamais rien.

Donc, envoyez les événements à $ scope.eventSources [0]

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

Comme vous le savez déjà, Full Calendar dépend de JQuery. Par conséquent, tout ce que vous avez à faire est de mettre un identifiant sur votre agenda comme ceci: 

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

et quand vous voulez mettre à jour le calendrier, appelez simplement: 

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

J'ai également lutté avec cela pendant un certain temps et cela a résolu tous mes problèmes. J'espère que cela vous aidera aussi!

Bonne chance!

0
Glen

Était coincé sur cela pendant un moment. Ce qui semble fonctionner pour moi s’est avéré être assez simple

Je récupère mon calendrier sur Google et exécute une fonction de formatage d'événements. Dans ceci, je définis un nouveau tableau et à la fin de la fonction, je mets mon eventSource égal au nouveau tableau. Alors j'appelle $scope.$apply

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

Essaye ça. Cela a fonctionné pour moi.

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

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

}
0
snfrox

Bien que ce soit une réponse tardive, mais espérons que cela pourra aider certains. Je le présente pas à pas.

  1. Vous devrez conserver la même source d'événements que Studio4Development mentionnée précédemment.

    $ scope.events // pas besoin de le réinitialiser

  2. Vous allez supprimer l'événement mis à jour du tableau d'événements comme ceci (pour le dernier événement dans le tableau d'événements):

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

Pour les événements pouvant exister n'importe où dans le tableau d'événements, vous devez trouver son index à l'aide de:

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

et ensuite vous le supprimerez du tableau d'événements comme ceci:

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

  1. Ensuite, vous récupérerez cet événement de l'API comme ceci:

    getEvent (data.Id);

  2. et dans la méthode de rappel, vous ajouterez à nouveau l'événement dans le tableau des événements:

    var getSingleEventSuccessCallback = fonction (événement) { $ scope.events.Push (événement); };

0
Faran Shabbir