0

Tengo un problema con el funcionamiento del plugin de js "fullcalendar".

Me funciona todo bien: el añadir eventos, editarlos, eliminarlos, mostrarlos en el calendario con las horas correctas... Pero a la hora de navegar por los meses con las flechas "prev" y "next" no funciona correctamente.

Cuando voy hacia adelante o hacia atrás se cambian los meses correctamente pero el nombre del no corresponde con el mes mostrado, va con retraso. Es decir, si estamos en Enero y doy una vez a la flecha de "Next", se cambia al mes de Febrero pero en el texto superior sigue apareciendo Enero, después si pulso la flecha de "Prev", cambia al mes de Enero de nuevo y el texto es cuando cambia a Febrero.

Es algo bastante extraño y no encuento la forma de solucionarlo.

Adjunto el código de la conf. inicial:

$(document).ready(function() {

    /* Initialize FullCalendar */
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#example-fullcalendar').fullCalendar({
        header: {
            language: 'es',
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: 'load.php',
        timeFormat: "HH:mm",
        selectable: true,
        selectHelper: true,
        displayEventTime: true,
        eventAfterRender: function(event, element, view){
            element.css("background-color", "#DF0101");
        },
        // Función para crear un nuevo evento en el calendario al seleccionar días
        select: function(start, end, allDay){
            $("#modalAnyadir").modal("show");
        },
        // Función para editar el evento al hacer doble click encima de él
        eventRender: function(event, element){
            element.bind("dblclick", function(){
                $("#modalEditar").modal("show");
            });
        }
    });
});

Y no veo ninguna forma de corregir esto. Si hace falta que muestre cualquier otro código me avisan.

EDITADO Por ejemplo, se carga el calendario, y en la imagen que adjunto, donde aparece "enero 2019", al cargar el calendario aparece ese texto en blanco, sin nada. Entonces pulso la flecha de "Next" (marcada con un círculo rojo en la imagen), aparece el mes de febrero (como se puede observar en los días) pero en el texto superior aparece "enero 2019". Y al cargar el calendario tampoco aparecen los eventos de enero.

introducir la descripción de la imagen aquí

Saludos.

4
  • Copié el html que compartiste y ejecuté el calendario, la verdad no logro ver cuál es el error que tienes. ¿Podrías adjuntar imágenes?
    – dixoen
    el 28 ene. 2019 a las 12:13
  • He adjuntado una imagen @ValVert
    – Marcos
    el 28 ene. 2019 a las 12:44
  • A mi no me sucede el error, favor añade las referencias que estás utilizando (jquery, fullcalendar etc) y sus versiones.
    – dixoen
    el 28 ene. 2019 a las 12:59
  • Añadiré lo que tengo como respuesta.
    – dixoen
    el 28 ene. 2019 a las 13:05

1 respuesta 1

1

Según lo conversado el problema se podría encontrar en tus referencias y/o versiones, adjunto mi código y réplica mediante una imagen.

<!DOCTYPE html>
<html>
<head>
<title>recTime | v2.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='javascript/fullcalendar-3.9.0/fullcalendar.min.css' rel='stylesheet' />
  <link href='javascript/fullcalendar-3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
  <script src='javascript/fullcalendar-3.9.0/lib/moment.min.js'></script>
  <script src='javascript/fullcalendar-3.9.0/lib/jquery.min.js'></script>
  <script src='javascript/fullcalendar-3.9.0/lib/jquery-ui.min.js'></script>
  <script src='javascript/fullcalendar-3.9.0/fullcalendar.min.js'></script>
  <script src='javascript/fullcalendar-3.9.0/locale/es.js'></script>
  <script>
    $(document).ready(function() {

      /* Initialize FullCalendar */
      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();

      $('#example-fullcalendar').fullCalendar({
            header: {
                language: 'es',
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            //events: 'load.php',
            timeFormat: "HH:mm",
            selectable: true,
            selectHelper: true,
            displayEventTime: true,
            eventAfterRender: function(event, element, view){
                element.css("background-color", "#DF0101");
            },
            // Función para crear un nuevo evento en el calendario al seleccionar días
            select: function(start, end, allDay){
                $("#modalAnyadir").modal("show");
            },
            // Función para editar el evento al hacer doble click encima de él
            eventRender: function(event, element){
                element.bind("dblclick", function(){
                    $("#modalEditar").modal("show");
                });
            }
      });
    });
  </script>
</head>
<body>
    <div id='example-fullcalendar'></div>
</body>
</html>

Imagen de solución, esto sucede al cargar el calendario, osea, se muestra el título del mes y al cambiar con los botones de prev,next no tengo problemas en la navegación. introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.