Alternative option for eventAfterAllRender in FullCalendar v5.x

Question

In FullCalendar v3, there has an option to catch after loading all events.

eventAfterAllRender

It seems removed in v4. As saying here: https://fullcalendar.io/docs/v4/upgrading-from-v3

Here has a code snippet to prepare a demo calendar in 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

Is there any option to perform an action after loading all events in v5?

I'm actually using a html loader. It's showing with the page load. But after loading all events, it should be removed.

No there isn't. What exactly is it that you need to do after all the events have loaded? — ADyson, Jan 24 '21 at 22:37
I need an option to perform an action when all events are loaded. Please let me know if I answered your question. — Encrypted, Jan 25 '21 at 13:35
No you didn't. In your original question, you already said you need to perform an action after all events have loaded. I was asking what exactly this action is? Just in case maybe there is another way to achieve your overall goal. If we understand what you are trying to do, and why, then maybe we can help you find another solution. — ADyson, Jan 25 '21 at 13:40
@ADyson, sorry. If I could run a console `console.log("All events loaded!")` that's all for me. — Encrypted, Jan 25 '21 at 14:00
Ok. How does that help your application then? Seems like not a big deal. If it's not there any more, so what? In your example code above, the events are hard-coded, so they'll be loaded pretty much instantly anyway. Are you perhaps getting them from a JSON feed in your real application? — ADyson, Jan 25 '21 at 14:01
Yes, I'm getting them from a JSON feed in my real application. But it's a pretty big deal in my case. Isn't it possible anyway? — Encrypted, Jan 25 '21 at 14:07
Why is it a big deal, if all you do is log it to the console? That doesn't make sense. Console logging is only for development purposes. You could watch the network tab in the dev tools to see how long the AJAX request takes, but of course that doesn't take into account the rendering time. Do you have any other purpose for doing this, in the real application? Because as I said originally, the answer is no, there isn't a direct replacement for this feature in fullCalendar 5. If you genuinely need a workaround, you'll have to come up with a genuine use case. — ADyson, Jan 25 '21 at 14:15
Ok, I'm actually using a html loader. It's showing with the page load. But after loading all events, it should be removed. — Encrypted, Jan 25 '21 at 14:25
Ok. Why didn't you just say that before instead of trivialising it?? See https://fullcalendar.io/docs/loading for something which will do the job - you can make a loader show/hide when the AJAX part of the task starts and stops. It doesn't cover the rendering of the events by fullCalendar, but that's normally very fast unless you have an absurd number of events being downloaded for a single time period. — ADyson, Jan 25 '21 at 14:34

score 4 · Accepted Answer · answered Jan 27 '21 at 10:11

For this situation where you have a loader you want to show and hide, please see the loading callback option for something which will do the job - you can use that callback to make a loader show/hide when the AJAX part of the task starts and stops.

e.g.

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

Unlike the old eventAfterAllRender it starts and stops on the start/end of the AJAX request and doesn't cover the rendering of the events by fullCalendar, but that's normally very fast unless you have an absurd number of events being downloaded for a single time period.

score 0 · Answer 2 · answered Apr 14 '23 at 15:45

0

For version 6 I'm using next settings instead eventAfterAllRender

datesSet: function (dateInfo) {
  //my custom code                
}

answered Apr 14 '23 at 15:45

Sergey Kharchishin

434
4
6

Alternative option for eventAfterAllRender in FullCalendar v5.x

2 Answers2