En FullCalendar v3, hay una opción para capturar después de cargar todos los eventos.

eventAfterAllRender

Parece eliminado en v4. Como dice aquí: ingrese la descripción de la imagen aquí https://fullcalendar.io/docs/v4/upgrading-from-v3

Aquí tiene un fragmento de código para preparar un calendario de demostración en v5.

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.css' rel='stylesheet' />
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js'></script>
        <script>

            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                    },
                    initialDate: '2020-09-12',
                    navLinks: true, // can click day/week names to navigate views
                    businessHours: true, // display business hours
                    editable: true,
                    selectable: true,
                    events: [
                        {
                            title: 'Business Lunch',
                            start: '2020-09-03T13:00:00',
                            constraint: 'businessHours'
                        },
                        {
                            title: 'Meeting',
                            start: '2020-09-13T11:00:00',
                            constraint: 'availableForMeeting', // defined below
                            color: '#257e4a'
                        },
                        {
                            title: 'Conference',
                            start: '2020-09-18',
                            end: '2020-09-20'
                        },
                        {
                            title: 'Party',
                            start: '2020-09-29T20:00:00'
                        },

                        // areas where "Meeting" must be dropped
                        {
                            groupId: 'availableForMeeting',
                            start: '2020-09-11T10:00:00',
                            end: '2020-09-11T16:00:00',
                            display: 'background'
                        },
                        {
                            groupId: 'availableForMeeting',
                            start: '2020-09-13T10:00:00',
                            end: '2020-09-13T16:00:00',
                            display: 'background'
                        },

                        // red areas where no events can be dropped
                        {
                            start: '2020-09-24',
                            end: '2020-09-28',
                            overlap: false,
                            display: 'background',
                            color: '#ff9f89'
                        },
                        {
                            start: '2020-09-06',
                            end: '2020-09-08',
                            overlap: false,
                            display: 'background',
                            color: '#ff9f89'
                        }
                    ]
                });

                calendar.render();
            });

        </script>
        <style>

            body {
                margin: 40px 10px;
                padding: 0;
                font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
                font-size: 14px;
            }

            #calendar {
                max-width: 1100px;
                margin: 0 auto;
            }

        </style>
    </head>
    <body>

        <div id='calendar'></div>

    </body>
</html>

Codepen: https://codepen.io/wetruck/pen/poEXEve

¿Existe alguna opción para realizar una acción después de cargar todos los eventos en la v5?

De hecho, estoy usando un cargador html. Se muestra con la carga de la página. Pero después de cargar todos los eventos, debería eliminarse.

1
Encrypted 24 ene. 2021 a las 23:47

1 respuesta

La mejor respuesta

Para esta situación en la que tiene un cargador que desea mostrar y ocultar, consulte la opción de devolución de llamada cargando para algo que hará el trabajo: puede usar esa devolución de llamada para hacer que un cargador se muestre / oculte cuando la parte AJAX de la tarea se inicia y se detiene.

E.g.

loading: function( isLoading ) {
  if (isLoading == true) {
    //show your loader
  } else {
    //hide your loader
  }
}

A diferencia del antiguo eventAfterAllRender, comienza y se detiene al inicio / final de la solicitud AJAX y no cubre la representación de los eventos por fullCalendar, pero normalmente es muy rápido a menos que tenga una cantidad absurda de eventos descargados para un solo período de tiempo.

1
ADyson 27 ene. 2021 a las 10:11