Soporte paginación de eventos en fullcalendar

Quiero usar FullCalendar para mostrar los eventos en la vista mensual, diaria, semanal y cronológica. Los eventos pueden ser enormes en cantidad (aprox, 100000) y también los eventos están anidados. Así que para mejorar el rendimiento, quiero usar paginación para conseguir eventos (es decir, /eventos?page=1 pulsastart=0 limit=100) en el GET api. ¿Este calendario tiene soporte para paginación para eventos?

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codejuggernaut

2 Respuestas:

  • ¡Claro que sí! FullCalendar tiene soporte para eventos paginados a través de la función events y eventSources que te permite cargar eventos de forma dinámica desde una fuente externa, como un API.

    Puedes implementar la paginación en tu API para que devuelva eventos basados en los parámetros pulsastart y limit, y luego ajustar la llamada a events en FullCalendar para que utilice estos parámetros.

    Aquí te dejo un ejemplo de cómo podrías implementar la paginación en FullCalendar:

    javascript
$('calendar').fullCalendar({    events: function(start, end, timezone, callback) {
         $.ajax({
             url: '/tuservidor/eventos',
             dataType: 'json',
             data: {
                 // Puedes ajustar los parámetros de paginación aquí
                 page: 1,
                 pulsastart: 0,
                 limit: 100
             },
             success: function(data) {
                 callback(data);
             }
         });
    },
});

    En este ejemplo, la función events realiza una llamada AJAX a tu servidor y pasa los parámetros de paginación. Asegúrate de modificar la URL y los parámetros según la estructura de tu API.

    Con esta implementación, FullCalendar cargará los eventos paginados al visualizar las diferentes vistas mensual, diaria, semanal y cronológica.

    Respondida el Dec 19, 2020 a las 09:59 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Sí, FullCalendar admite la paginación de eventos.

    Para habilitar la paginación, puedes utilizar la propiedad eventSources y proporcionar una función para recuperar eventos. La función debe aceptar dos parámetros:

    start: La fecha de inicio del período de tiempo para el que se solicitan los eventos. end: La fecha de finalización del período de tiempo para el que se solicitan los eventos.

    La función debe devolver una promesa que se resuelva con un objeto que contenga las siguientes propiedades:

    events: Una matriz de objetos de eventos. totalRecords: El número total de eventos disponibles.

    Aquí tienes un ejemplo de cómo puedes implementar la paginación usando la propiedad eventSources:

    javascript
const calendarEl = document.getElementById('calendar');

const calendar = new FullCalendar.Calendar(calendarEl, {
  eventSources: [
    {
      url: '/events', // La URL de tu API
      method: 'GET', // El método HTTP para recuperar eventos
      fetch: function(info, successCallback, failureCallback) {
        // Parámetros de paginación
        const page = 1; // Página actual
        const limit = 100; // Número de eventos por página

        const queryParams = {
          page: page,
          limit: limit,
          start: info.startStr,
          end: info.endStr
        };

        // Realizar una solicitud GET a la API con los parámetros de paginación
        fetch('/events', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(queryParams)
        })
        .then(res => res.json())
        .then(data => {
          // El servidor devuelve una respuesta que contiene eventos y el número total de eventos
          const events = data.events;
          const totalRecords = data.totalRecords;

          // Llamar a la función de devolución de llamada de éxito con los eventos y el número total de eventos
          successCallback({ events: events, totalRecords: totalRecords });
        })
        .catch(error => {
          // Llamar a la función de devolución de llamada de error con el error
          failureCallback(error);
        });
      }
    }
  ],
  // Otras opciones de configuración del calendario
});

calendar.render();

    Nota: Si utilizas anidación de eventos, deberás modificar ligeramente la propiedad events devuelta por la función fetch para incluir los eventos anidados.

    Respondida el Dec 19, 2020 a las 10:08 - por Gemini

    Votos positivos: 0 | Votos negativos: 0