fullcalendar non visibile fino a quando non si fa clic sul pulsante o si ridimensiona la finestra?

Question

Uso il calendario completo jquery con angularJS e angularstrap. Il problema sembra essere che il calendario verrà visualizzato solo quando faccio clic su uno dei pulsanti nel calendario o ridimensiono la finestra del browser. Questo calendario viene caricato in una casella modale inizializzata usando angularstrap.

Apprezzo l'aiuto.

Plunkr qui: LINK

modale HTML è controller search_modal.html calendario è: regolatore Parent calendarCtrl.js è search.js

Edit: Dopo aver sperimentato lo stesso problema con le mappe di Google e una galleria I Ho tentato di implementare Non penso che questo sia un problema direttamente correlato al calendario, ma è più relativo alla casella modale stessa. Tutto ciò che è interattivo e coinvolge javascript non viene ridimensionato correttamente in base alle dimensioni della casella modale. Qualcuno ha qualche idea su come risolvere questo problema?

Answer 1

Il tuo problema sembra essere simile a How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown

tuo modale è impostato da:

<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"> 

Rimozione del display: none (dare spazio) prima l'inserto calendario verrà risolvere il problema. Con il codice sopra b.e. aggiungi #search_modal-003 {display:block; } al tuo css personalizzato.

Answer 2

Il problema è che il calendario è inizializzato mentre la modale non è visibile. Se il modale era in un controller, potresti potenzialmente utilizzare $scope.$on('modal-shown', function() {}); per attivare in qualche modo lo calendar('render');.

Non riuscivo a trovare un modo per rilevare la visibilità. Ho provato a utilizzare un $ watch nella direttiva su elm.is(':visible'), ma ho potuto farlo controllare solo 2 volte, quando è stato caricato.

Answer 3

Ho creato una direttiva personalizzata e una fabbrica per controllare quando mostrare e nascondere il calendario. Quando calendarFactory.isVisible è impostato su true, si chiama la funzione di rendering fullCalendar.

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

---

snippet di codice viene rifatto dalla produzione e potrebbe non essere del tutto corretto, ma l'idea è. È necessario utilizzare $scope.$emit e $scope.$on anziché $watch btw.

Soluzione n. 2 ui-calandar Lo sto utilizzando ora per il nostro progetto e può essere utile per un'intergrazione rapida, ma vorrei suggerire la vostra direttiva personalizzata per la flessibilità. Facciamo cose come le doppie viste del calendario, la localizzazione lato client, la selezione personalizzata colore di sfondo, l'intestazione personalizzata per la navigazione di più viste. Se hai bisogno di cose del genere, ti suggerisco l'alternativa n. 1. E io davvero non so come scrivere direttive. Quindi non scoraggiarti! La parte più difficile sarà ottenere FullCalendar per il rendering dinamico.

Answer 4

Utilizzare la funzione settimeout per ritardare il caricamento del calendario, quindi funzionerà.

Answer 5

Ho affrontato lo stesso problema con la scheda di fondazione. Dove il mio calendario era in seconda scheda.Quello che ho fatto è stato che, quando l'utente fa clic sulla scheda, ho simulato il pulsante "Oggi" facendo clic all'interno di un setTimeout con un ritardo minimo. Questo risolve il mio problema

Answer 6

Solo per aggiungere un'altra risposta a questo. Stavo usando fullcalendar in una scheda di bootstrap. Per rendere il calendario, ho aggiunto:

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