$("#fullcalendar").fullCalendar is not a function

Question

I can't the see issue with my attempt to use fullCalendar, I've read all the previous questions and answers, they usually have two jquery's or an error in the script sequence. Can anyone advise what I have done wrong please? (I've used older versions of libraries whilst checking).

<link href="~/Scripts/plugins/fullcalendar/fullcalendar.css" rel="stylesheet" />

<div id='calendar'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="~/Scripts/plugins/fullcalendar/fullcalendar.js"></script>

<script>
$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});
</script>

Your path to fullcalendar.js is incorrect so the file is not being loaded. Check what it should be — Rory McCrossan, Mar 25 '17 at 18:44
Hi Both, thanks for looking, I'm running this on localhost and did check that it resolved by checking in the browser. I've updated using the links provided by Matt Ball and the error in console is TypeError: $(...).fullCalendar is not a function[Learn More] — Harj Sohal, Mar 25 '17 at 19:18
thanks all - removed a jquery library from my layout page, feel dumb for not finding it earlier @**@ — Harj Sohal, Mar 25 '17 at 20:07
I ended up resolving my conflict between layout and the calendar page scripts using the answer found here: stackoverflow.com/questions/528241/how-do-i-run-different-versions-of-jquery-on-the-same-page — Harj Sohal, Mar 25 '17 at 22:02

score 3 · Accepted Answer · edited May 23 '17 at 11:54

A conflicting jquery library was in the layout page, this was resolved by using the answer found here: stackoverflow.com/questions/528241/how-do-i-run-different-ve‌rsions-of-jquery-on-‌the-same-page

I created a jQuery no conflict on the calendar page

<script src="jQuery2.2.3.js"></script>
<script>
   jq223 = jQuery.noConflict(false);
</script>

and replaced all the script code $ with jq223 like shown in that answer, example jq223("#id").hide();

score 0 · Answer 2 · answered Mar 25 '17 at 18:56

0

It is working in this jsfiddle: https://jsfiddle.net/uqf1q2f7/

Maybe the console gives you a hint, a ressource path is not right or you did not put the <div id='calendar'></div> into the body?

answered Mar 25 '17 at 18:56

marsman

75
1
1
9

Hi marsman, thanks for the fiddle, I've added the head & body tags and still have the same issue. Console shows error TypeError: $(...).fullCalendar is not a function - could it conflict with my startup bundle? – Harj Sohal Mar 25 '17 at 19:22
thanks for taking the time to do the fiddle, it set me on the right track, after checking my startup bundle and layout i found a jquery in the layout scripts @**@ removing this worked but removing from the page didn't – Harj Sohal Mar 25 '17 at 20:05

$("#fullcalendar").fullCalendar is not a function

2 Answers2