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/bootswatch@4.5.2/dist/flatly/bootstrap.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/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/fontawesome-free@5.13.1/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 class="card mb-4 mt-3 p-2">
<div id='calendar'></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/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/fullcalendar@5.7.2/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
<!-- DATATABLE -->
</html>>Solution :
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/fullcalendar@5.7.2/main.js"></script>before<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/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/bootswatch@4.5.2/dist/flatly/bootstrap.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/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/fontawesome-free@5.13.1/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 class="card mb-4 mt-3 p-2">
<div id='calendar'></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.2/locales-all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
<!-- DATATABLE -->
</html>