Uncaught ReferenceError: FullCalendar is not defined-CodePudding

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();

    });

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AGENDA</title>
    <link rel="icon" 
      type="image/png" 
      href="https://findicons.com/files/icons/2805/squareplex/512/google_calendar.png">
    
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <link rel="stylesheet" href="{{ asset('css/style.css') }}">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flatly/bootstrap.min.css"
              crossorigin="anonymous">
        

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
              integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w=="
              crossorigin="anonymous" referrerpolicy="no-referrer"/>
        
        <link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>
        <link rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css"
              integrity="sha512-63 XcK3ZAZFBhAVZ4irKWe9eorFG0qYsy2CaM5Z F3kUn76ukznN0cp4SArgItSbDFD1RrrWgVMBY9C/2ZoURA=="
              crossorigin="anonymous" referrerpolicy="no-referrer"/>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"
            integrity="sha512-GDey37RZAxFkpFeJorEUwNoIbkTwsyC736KNSYucu1WJWFK9qTdzYub8ATxktr6Dwke7nbFaioypzbDOQykoRg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
           
</head>
<body>

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

</body>
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/locales-all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/locale/fr.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
            crossorigin="anonymous"></script>

    <!-- DATATABLE -->
</html>

CodePudding user response：

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 <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/locale/fr.min.js"></script> because it's not needed in fullCalendar 5
Move <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.js"></script> before <script src="https://cdn.jsdelivr.net/npm/[email protected]/locales-all.min.js"></script> 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();

    });

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AGENDA</title>
    <link rel="icon" 
      type="image/png" 
      href="https://findicons.com/files/icons/2805/squareplex/512/google_calendar.png">
    
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <link rel="stylesheet" href="{{ asset('css/style.css') }}">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flatly/bootstrap.min.css"
              crossorigin="anonymous">
        

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
              integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w=="
              crossorigin="anonymous" referrerpolicy="no-referrer"/>
        
        <link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>
        <link rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css"
              integrity="sha512-63 XcK3ZAZFBhAVZ4irKWe9eorFG0qYsy2CaM5Z F3kUn76ukznN0cp4SArgItSbDFD1RrrWgVMBY9C/2ZoURA=="
              crossorigin="anonymous" referrerpolicy="no-referrer"/>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"
            integrity="sha512-GDey37RZAxFkpFeJorEUwNoIbkTwsyC736KNSYucu1WJWFK9qTdzYub8ATxktr6Dwke7nbFaioypzbDOQykoRg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
           
</head>
<body>

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

</body>
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/locales-all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
            crossorigin="anonymous"></script>

    <!-- DATATABLE -->
</html>