lazyFetching does not work in fullcalendar plugin

Question

this is my fullcalendar definition:

        $('#modal_calendar').on('shown.bs.modal', function () {
                $('[data-toggle="calendar"]').fullCalendar({
                    themeSystem: 'bootstrap4',
                    locale: 'es',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
                    header: {
                        left: 'title',
                        center: '',
                        right: 'prev,next today'
                    },
                    buttonText: {
                        today: 'Hoy',
                        month: 'Mes',
                        week: 'Semana',
                        day: 'Día'
                    },
                    events: '/my/url',
                    lazyFetching: false
                });
            });

I am loading the full calendar when a modal dialog appears. Note the lazyFetching = false. I need the events to be retrieved always.

When I load the page and open the modal dialog box, the /my/url url is called, so calendar shows the events correctly. The problem I am having is that when I close the dialog box, change some event and then open the dialog box again, the /my/url url is not called again to show the change. It is called when I change month by mean of the fullcalendar navigation buttons.

Any help?

ADyson ADyson · Accepted Answer · 2021-04-29T09:07:57

when I close the dialog box, change some event and then open the dialog box again, the /my/url url is not called again

...I think it's because doing this does not cause fullCalendar to re-load, or fetch new events due to a change of date. It's not that lazyFetching: false doesn't work, it's that you're not doing anything which would trigger a fetch.

You can trigger it manually to fetch new events by calling the refetchEvents method.

e.g.

$('[data-toggle="calendar"]').fullCalendar("refetchEvents");

I suggest you call this function when you re-open the dialog box.

Also please ensure that you don't re-create the calendar every time you open the dialog box - that isn't necessary and may cause extra problems. Check for its existence - if it doesn't exist, create it, and if it does, simply refetch the events instead. If the calendar has been hidden, you may find you also need to re-render it - see the render method for details.

lazyFetching does not work in fullcalendar plugin

1 Answers