Borislav Hadzhiev
Last updated: Oct 19, 2021
Check out my new book
The "$(...).fullCalendar is not a function" jQuery error occurs for multiple reasons:
To solve the "$(...).fullCalendar is not a function" jQuery error, make sure to load the jQuery library before loading the FullCalendar library. The libraries have to be loaded only once on the page, otherwise the error is thrown.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load CSS file for FullCalendar --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" integrity="sha512-KXkS7cFeWpYwcoXxyfOumLyRGXMp7BTMTjwrgjMg0+hls4thG2JGzRgQtRfnAuKTn2KWTDZX4UdPg+xTs8k80Q==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div id="calendar"></div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load moment.js ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <!-- ✅ load FullCalendar ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js" integrity="sha512-o0rWIsZigOfRAgBxl4puyd0t6YKzeAw9em/29Ag7lhCQfaaua/mDwnpE2PVzwqJ08N7/wqrgdjc2E0mwdSY2Tg==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <!-- ✅ Load your JS file ✅ --> <script src="index.js"></script> </body> </html>
The order we loaded the scripts in is very important. The order is the following:
index.js
in the example)Here's the code for the index.js
file.
$(document).ready(function () { $('#calendar').fullCalendar({ weekends: false, // will hide Saturdays and Sundays }); });
We wait for the DOM to load before displaying the calendar.
If you open your browser, you will see the calendar render.
The moment.js
library also has to be loaded because the FullCalendar library
relies on it.
You can check if you're loading the scripts correctly when you open the console
in your browser. If you see any 404
errors related to loading the jQuery
scripts, then the path to the file is incorrect.