Come caricare correttamente il plugin fullcalendar jQuery in un div nascosto

Sto usando le schede degli strumenti jQuery per dividere la mia pagina in schede. Una di queste schede contiene un jQuery Fullcalendar. Perché carico JavaScript nella pagina per velocità e per evitare il flash di contenuti inutilizzati, nascondo le schede inizialmente non visualizzate utilizzando display: none. Quando si esegue questa operazione, il fullcalendar non viene visualizzato correttamente. Mostra i pulsanti corretti, ma fino a quando non premo il pulsante di oggi, non viene mostrato nessun calendario. Se permetto di renderizzare in un div visibile, viene visualizzato correttamente.Come caricare correttamente il plugin fullcalendar jQuery in un div nascosto

Posso aggirare questo usando la scheda-selezionare gli eventi per eseguire il rendering del calendario o spostando il calendario e gli script delle schede in testa, ma preferirei se ci fosse una soluzione più adeguata.

fonte

2010-10-29 Jens Alm

Quello che devi fare è caricare i dati dopo aver fatto clic sul collegamento, non del tutto sicuri, ma penso che il problema è che l'altezza non è impostata correttamente dopo che i dati sono stati caricati, quindi mostra solo la parte superiore.

Quello che ho fatto e lavorato per me.

$(document).ready(function() { 
    $("#calendareventlink").click (function(){ 
     loadCalendar(); 
    }); 
}); 
function loadCalendar(){ 
    //Do your data loading here 
} 

<a href="" id="calendareventlink">View Calendar</a>

fonte

2010-12-01 18:47:17 user527007

Questo è in realtà più o meno L'ho fatto anche alla fine, legandolo all'evento tab show delle mie schede, funziona abbastanza bene, anche se sembra un trucco :) –

-2

hai provato a visualizzare: nascosto anziché display: nessuno?

Non so se funzionerà, ma qualcosa che vale la pena provare.

fonte

2010-11-03 05:36:34 Steve

Credo che si intende 'visiblity: hidden;' - questo ha funzionato per me con una posizione di assoluta. In effetti senza questo 'fullCalendar ('render')' non ha funzionato affatto. Bit sporco, ma ... '$ ('# calendar'). Css ({position: 'relative', visibility: 'visible'}). FullCalendar ('render');' –

Avevo problemi con il dover fare clic sul pulsante "oggi" per rendere il calendario effettivamente visualizzato in una scheda jQueryUI. Sono stato in grado di risolvere completamente il problema inizializzando le schede DOPO che ho inizializzato il calendario. Tuttavia, sto facendo questo nella parte iniziale del documento e chiamando tutti gli altri js appena prima della chiusura del tag body. Spero possa aiutare.

fonte

2010-11-03 21:42:01 Masondesu

Quando il div è nascosto, fullCalendar non sa che dimensioni dovrebbe rendersi, quindi basta chiamare la funzione render dopo si sa che il div è visibile.

collegarlo al spettacolo evento o qualsiasi altra cosa:

$('#calendar').fullCalendar('render');

fonte

2011-07-20 00:37:39 ggez44

Sì, questo è quello che ho finito, vedere il mio commento alla prima risposta :) –

Molto preferisco questa soluzione piuttosto che dover richiamare l'intero script init (non mi piace mai eseguire gli script più volte se c'è una sorta di ricarica, aggiornamento o in questo caso è disponibile un'opzione di rendering) – JakeJ

È anche possibile chiamare .resize() per ogni elemento genitore/antenato del calendario - quando si sa che il calendario è visibile;)

fonte

2011-12-09 13:19:51

Quando si fa clic sulla scheda chiamata qualcosa di simile:

$('#calendar').fullCalendar('render'); // Force the calendar to render

fonte

2012-02-01 21:05:24

è necessario utilizzare javascript per impostare visualizzazione nessuno fullcalendar

qualcosa di simile:

   document.getElementById("test").style.display="none";

allora assomiglia a questo:

<html> 
<head> 
    <link rel='stylesheet' type='text/css' href='bigcalendar.css' /> 
    <script type='text/javascript' src='jquery-1.8.1.min.js'></script> 
    <script type='text/javascript' src='bigcalendar.js'></script> 

    <script type='text/javascript'> 


     $(document).ready(function() { 

      $('#bigCalendar').fullCalendar({ 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
       }, 
       editable: false, 
       events: [{"id":111,"title":"Event1","start":"2012-11-10","url":"http:\/\/yahoo.com\/"},{"id":222,"title":"Event2","start":"2012-11-20","end":"2012-11-22","url":"http:\/\/yahoo.com\/"}] 
      }); 

      document.getElementById("test").style.display="none"; 
     }); 





     function closeEventDetails(){ 

      $("#test").hide("fast"); 
     } 



     function showBigCalendar(){ 

      $("#test").show("fast"); 

      //    $('#bigCalendar').fullCalendar('render') 

     } 



     $(document).ready(function() { 
     }); 

    </script> 

    <style type='text/css'> 

     body { 
      margin-top: 40px; 
      text-align: center; 
      font-size: 14px; 
      font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
     } 

     #bigcalendar { 
      width: 900px; 
      margin: 0 auto; 
     } 

    </style> 

</head> 
<body> 


    <!--zobrazenie velkeho kalendara--> 

    <button onclick="showBigCalendar();" >open</button> 
    <button onclick="closeEventDetails();">close</button> 

    <div id="test" ><div id="bigCalendar" ></div></div> 


</body>

fonte

2012-11-13 08:00:27 gizmo16

So che questa domanda è antica, ma è venuto fuori prima, mentre ero alla ricerca di una soluzione per lo stesso problema. Per qualche motivo the proposed solution with render non funziona in alcuni casi specifici (se la scheda inattiva è caricata con voci di calendario), quindi ho dovuto refetchEvents.

Il codice è il seguente:

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

fonte

2018-01-10 05:09:20 AntonK

Come caricare correttamente il plugin fullcalendar jQuery in un div nascosto

risposta

Problemi correlati