Uncaught ReferenceError: FullCalendar is not defined

Question

I tried to use FullCalendar , but it gives me error:

Uncaught ReferenceError: FullCalendar is not defined

and also

error: Cannot read properties of undefined (reading 'datepickerLocale')

I have already tried the solutions: link1 and link2 but still the same error.

I don't know how to solve this error.

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


        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'fr',
            eventDisplay: 'block',
            firstDay: 1,

            
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            locale: 'fr',
            editable: false,
            droppable: false, // this allows things to be dropped onto the calendar
            eventClick: function (el) {
                el.jsEvent.preventDefault();
                $("#showEventModal").modal('show');
                $("#showEventModal").on('shown.bs.modal', function (e) {
                    $('#loading_zone').hide();
                    $('#target_zone').show();
                });
                $("#target_zone").load(decodeURIComponent( el.event.id));

                console.log($("#target_zone"));
            }
        });

        calendar.render();

    });




    
    AGENDA

ADyson · Accepted Answer

Your second locale file won't work because it's for the wrong version of fullCalendar. Only use the file which matches your fullcalendar version.

Also you need to load the main fullCalendar JS file before the locale file, because the locale file depends on fullCalendar. Once you correct those two things, it should work.

Summary of changes:

Remove because it's not needed in fullCalendar 5
Move before in the HTML.

Demo:

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


        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'fr',
            eventDisplay: 'block',
            firstDay: 1,

            
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            locale: 'fr',
            editable: false,
            droppable: false, // this allows things to be dropped onto the calendar
            eventClick: function (el) {
                el.jsEvent.preventDefault();
                $("#showEventModal").modal('show');
                $("#showEventModal").on('shown.bs.modal', function (e) {
                    $('#loading_zone').hide();
                    $('#target_zone').show();
                });
                $("#target_zone").load(decodeURIComponent( el.event.id));

                console.log($("#target_zone"));
            }
        });

        calendar.render();

    });




    
    AGENDA

Uncaught ReferenceError: FullCalendar is not defined

Answers (1)

Related Questions