Vollkalender nicht sichtbar, bis auf die Schaltfläche geklickt oder die Fenstergröße geändert wird?

Question

Ich benutze jQuery Vollkalender mit AngularJS und Angularstrap. Das Problem scheint zu sein, dass der Kalender nur angezeigt wird, wenn ich entweder auf eine der Schaltflächen im Kalender klicke oder die Größe des Browserfensters ändere. Dieser Kalender wird in einer modalen Box geladen, die mit angularstrap initialisiert wurde.

Ich schätze die Hilfe.

Plunkr hier: LINK

Modal HTML ist in search_modal.html Kalender-Controller ist: calendarCtrl.js Eltern Controller ist Search.js

Edit: Nach dem gleichen Problem mit Google Maps zu erleben und eine Galerie I habe versucht zu implementieren Ich denke nicht, dass dies ein Problem ist, das direkt mit dem Kalender verbunden ist und eher mit der Modal Box selbst zusammenhängt. Alles, was interaktiv ist und JavaScript beinhaltet, skaliert nicht entsprechend der Größe der modalen Box. Hat jemand Ideen, wie das zu beheben ist?

Answer 1

Ihr Problem scheint zu How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown

Ihre modal ähnlich zu sein gesetzt durch:

<a data-bs-modal="'search_modal.html'" href="#" class="ng-scope" data-target="#search_modal-003" data-toggle="modal">Search</a> 
<div id="search_modal-003" class="modal hide fade ng-scope in" tabindex="-1" aria-hidden="false"> 

die Anzeige entfernen: kein (geben Raum) vor dem Kalender einfügen, Ihr Problem beheben. Mit dem obigen Code b.e. fügen Sie #search_modal-003 {display:block; } zu Ihrem kundenspezifischen css hinzu.

Answer 2

Das Problem ist, dass der Kalender initialisiert wird, während das Modal nicht sichtbar ist. Wenn sich das Modal in einem Controller befand, könnten Sie möglicherweise $scope.$on('modal-shown', function() {}); verwenden, um irgendwie calendar('render'); auszulösen.

Ich konnte keinen Weg finden, die Sichtbarkeit zu erkennen. Ich habe versucht, eine $ watch in der Direktive auf elm.is(':visible') zu verwenden, konnte es aber nur 2 Mal überprüfen, wenn es geladen wurde.

Answer 3

Ich habe eine benutzerdefinierte Anweisung und eine Fabrik erstellt, um zu steuern, wann der Kalender ein- und ausgeblendet werden soll. Wenn calendarFactory.isVisible auf true eingestellt ist, rufen Sie die Renderfunktion fullCalendar auf.

restrict: 'A', 
    scope: true, 
    link: function (scope, element, attrs) { 
     scope.$watch(function (scope) { 
      return calendarFactory.isVisible; 
     }, function (newValue, oldValue) { 
      if(newValue === true) 
       $(element).fullCalendar('render'); 

---

-Code-Schnipsel ist von der Produktion neu gemacht und vielleicht nicht ganz korrekt sein, aber die Idee ist. Sie sollten $scope.$emit und $scope.$on statt $watch btw verwenden.

Lösung # 2 wäre ui-calandar Ich benutze es jetzt für unser eigenes Projekt und es kann für die schnelle Integration schön sein, aber ich würde Ihre eigenen benutzerdefinierten Richtlinie für Flexibilität vorschlagen. Wir machen Dinge wie doppelte Kalenderansichten, clientseitige Lokalisierung, benutzerdefinierte Hintergrundfarbe für die Auswahl, benutzerdefinierte Kopfzeile für die Navigation in mehreren Ansichten. Wenn Sie solche Dinge brauchen, empfehle ich Alternative # 1. Und ich weiß wirklich nicht, wie man Anweisungen schreibt. Also lass dich nicht entmutigen! Der schwierigste Teil wird sein, dass FullCalendar dynamisch gerendert wird.

Answer 4

Verwenden Sie die settimeout-Funktion, um die Last des Kalenders zu verzögern, dann funktioniert es.

Answer 5

Ich hatte das gleiche Problem mit Fundament Registerkarte. Wo war mein Kalender in der zweiten Registerkarte.Was ich tat, war, wenn Benutzer auf den Reiter klicken, den ich simulierte "Heute" Knopf innerhalb eines setTimeout mit sehr minimaler Verzögerung klickte. Dies löst mein Problem

Answer 6

Nur um eine weitere Antwort zu diesem hinzuzufügen. Ich benutzte Vollkalender in einem Bootstrap-Tab. Um den Kalender zu machen, habe ich:

$('a#id-of-tab').on('shown.bs.tab', function (e) { 
    $("#the-calendar-container").fullCalendar('render'); 
});