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

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee