CODEWITHSUNDEEP
jqueryhtmljquery-pluginsfullcalendar
Arno Turelinckx
Arno Turelinckx

Reputation: 132

fullcalendar is not a function

I implemented fullcalender in my homepage and it doesn't seem to load in. In console I receive the following error:

Uncaught TypeError: $(...).fullCalendar is not a function(anonymous function) @ team.php:69n.Callbacks.j @ jquery-1.11.2.js:3054n.Callbacks.k.fireWith @ jquery-1.11.2.js:3200n.extend.ready @ jquery-1.11.2.js:3397I @ jquery-1.11.2.js:3423

Here is the html code:

<div id="kalender" class="container">
    <h2>Kalender</h2>
    <div id='calendar'></div>
  </div>

The following code is in my head selection:

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel='stylesheet' href='css/fullcalendar.css' />
<link rel='stylesheet' href='css/jquery-ui.theme.min.css' />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.js'></script>
<script type="text/javascript" src="js/fullcalendar.min.js"></script>
<script src='js/lang/nl.js'></script>
<script type='text/javascript' src='js/gcal.js'></script>

And this jquery script should do the job(ofcourse with my key and id):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
$(document).ready(function() {
	
    $('#calendar').fullCalendar({
		header: {
        center: 'month,week' // buttons for switching between views
    },
    views: {
        week: {
            type: 'agenda',
            duration: { days: 7 },
            buttonText: 'week'
        }
    },
        lang: 'nl',
		googleCalendarApiKey: '<MY KEY>',
        events: {
            googleCalendarId: '<MY ID>@group.calendar.google.com'
        }
    })
});
</script>

I used the code on another page and it worked like a charm, unfortunately it doesn't work on this page, and I can't seem to get around the error.

Upvotes: 2

Views: 19977

Answers (3)

AnEmortalKid
AnEmortalKid

Reputation: 51

Additionally, I found that fullCalendar has to be the last one loaded.

Upvotes: 0

Arno Turelinckx
Arno Turelinckx

Reputation: 132

so, i was indeed including the jquery link 2 times...

it was hidden in the footer, I have no idea how it end up there but when i removed it, it completely solved the problem!

thank you charlietfl and Rafael Cardoso for helping me out.

Upvotes: 9

rafaelc
rafaelc

Reputation: 59264

Try to add these in your header

<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>

Upvotes: 3

Related Questions