Solve - $(...).fullCalendar is not a function jQuery Error

avatar

Borislav Hadzhiev

Last updated: Oct 19, 2021

banner

Check out my new book

Solve - $(...).fullCalendar is not a function #

The "$(...).fullCalendar is not a function" jQuery error occurs for multiple reasons:

  1. Forgetting to include the FullCalendar library.
  2. Loading the FullCalendar library before the jQuery library.
  3. Loading the jQuery library twice.
  4. Forgetting to load the moment.js library before loading FullCalendar.
  5. Specifying an incorrect path to the jQuery files.

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.

index.html
<!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:

  1. Load CSS stylesheet for FullCalendar
  2. Load jQuery library
  3. Load Moment.JS library
  4. Load FullCalendar library
  5. Run your own JS file (index.js in the example)

Here's the code for the index.js file.

index.js
$(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.

Note that if you load the FullCalendar library before jQuery or load the jQuery library twice, you would get the error.

The moment.js library also has to be loaded because the FullCalendar library relies on it.

If you are loading the libraries from files on your local file system, make sure to specify the paths to the files correctly. Specifying an incorrect path to a script is equivalent to not loading the script at all.

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.