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

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

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

Forgetting to include the FullCalendar library.
Loading the FullCalendar library before the jQuery library.
Loading the jQuery library twice.
Forgetting to load the moment.js library before loading FullCalendar.
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

Copied!
<!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:

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

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

index.js

Copied!
$(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.

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

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

Borislav Hadzhiev