javascriptfullcalendarfullcalendar-5

FullCalendar v5 - TypeError: $(...).fullCalendar is not a function

I'm using FullCalendar 5.5.1 The problem is that it doesn't display correctly and I keep receiving This Error: TypeError: $(...).fullCalendar is not a function

Here is my code:

$(document).ready(function () {
    InitializeCalendar();
});

function InitializeCalendar() {
    try {
        $('#calendar').fullCalendar({
            timezone: false,
            header: {
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            editable: false
        });
    }
    catch (e) {
        alert(e);
    }
}

Here are references:

<script type="text/javascript" src="~/lib/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/combine/npm/fullcalendar@5.5.1"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
<script type="text/javascript" src="~/js/notify.min.js"></script>
<script src="~/js/script-custom-calendar.js"></script>

I'm following a tutorial and this worked for him. I don't know why is doesn't work for me. This is the original project: https://github.com/bhrugen/appointmentscheduler

Solution

  • Since version 4 of FullCalendar, this is not the way to initialize the calendar. See the changes here: https://fullcalendar.io/docs/v4/upgrading-from-v3

    Major breaking changes:

    Removal of jQuery as a dependency. Consequently: Raw DOM nodes are used in place of jQuery objects Calendar initialization no longer happens via a jQuery method.

    See how to do it the v5 way here: https://fullcalendar.io/docs/initialize-globals