¿Cómo puedo cargar correctamente el complemento jQuery fullcalendar en un div oculto?

Estoy usando las pestañas de las herramientas de jQuery para dividir mi página en pestañas. Una de esas pestañas contiene un jQuery Fullcalendar. Debido a que cargué JavaScript por última vez en la página para obtener mayor velocidad y para evitar el destello del contenido sin estilo, oculto las pestañas que no se vieron inicialmente con la pantalla: none. Al hacer esto, el calendario completo no se procesa correctamente. Muestra los botones adecuados, pero hasta que presione el botón de hoy, no se muestra el calendario. Si le dejo renderizar en un div visible, se muestra correctamente.¿Cómo puedo cargar correctamente el complemento jQuery fullcalendar en un div oculto?

Puedo solucionar esto usando los eventos de selección de pestañas para renderizar el calendario o moviendo el calendario y los scripts de pestañas a la cabeza, pero prefiero que haya una solución más adecuada.

Fuente

2010-10-29 Jens Alm

Lo que debe hacer es cargar los datos después de hacer clic en el enlace, no del todo seguro, pero creo que el problema es que la altura no está configurada correctamente después de cargar los datos, por lo que solo muestra la parte superior.

Lo que he hecho y trabajado para mí.

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

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

Fuente

2010-12-01 18:47:17 user527007

Esto es en realidad más o menos lo Lo hice también al final, vinculándolo al evento show tab de mis pestañas, funciona bastante bien, aunque parece un hack :) –

-2

intenté mostrar: oculto en lugar de mostrar: ninguno?

No tengo idea de si funcionará, pero vale la pena intentarlo.

Fuente

2010-11-03 05:36:34 Steve

Creo que significa 'visiblity de: hidden;' - esto funcionó para mí con una posición de absoluta. De hecho, sin esto 'fullCalendar ('render')' no funcionó en absoluto. Bit sucio, pero ... '$ ('# calendario'). Css ({posición: 'relativa', visibilidad: 'visible'}). FullCalendar ('render');' –

Estaba teniendo problemas con el hecho de tener que hacer clic en el botón "hoy" para que el calendario realmente aparezca en la pestaña jQueryUI. Pude resolver el problema completamente al inicializar las pestañas DESPUÉS de haber inicializado el calendario. Sin embargo, estoy haciendo esto en la parte superior del documento y llamando a todas las demás js justo antes del cierre de la etiqueta del cuerpo. Espero que ayude.

Fuente

2010-11-03 21:42:01 Masondesu

Cuando se oculta el div, fullCalendar no sabe qué tamaño debe representar en sí, por lo que sólo tiene que llamar a la función render después de saber que el div es visible.

adjuntarlo al evento espectáculo o lo que sea:

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

Fuente

2011-07-20 00:37:39 ggez44

Sí, esto fue lo que terminé haciendo, ver mi comentario a la primera respuesta :) –

Mucho prefiero esta solución en lugar de tener que volver a llamar a todo el script de inicio (siempre me disgusta ejecutar scripts varias veces si hay algún tipo de recarga, actualización o en este caso una opción de renderizado disponible) – JakeJ

También puede llamar .resize() para cualquier elemento padre/ancestro del calendario - cuando se conoce el calendario es visible;)

Fuente

2011-12-09 13:19:51

al hacer clic en la pestaña llamada algo como esto:

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

Fuente

2012-02-01 21:05:24

debe usar javascript para establecer ninguna pantalla fullcalendar

algo como esto:

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

entonces se ve así:

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

Fuente

2012-11-13 08:00:27 gizmo16

Sé que esta pregunta es antiguo, pero salió primero, mientras que yo estaba buscando la solución por el mismo problema Por alguna razón the proposed solution with render no funciona en algunos casos específicos (si la pestaña inactiva está cargada con entradas de calendario), así que tuve que refetchEvents.

El código es el siguiente:

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

Fuente

2018-01-10 05:09:20 AntonK

¿Cómo puedo cargar correctamente el complemento jQuery fullcalendar en un div oculto?

Respuesta

Cuestiones relacionadas