javascriptphpjqueryfullcalendarfullcalendar-5

Alternative option for eventAfterAllRender in FullCalendar v5.x

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

eventAfterAllRender

It seems removed in v4. As saying here: enter image description 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.

Solution

  • 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.