FullCalendar TypeError: $(…).fullCalendar is not a function
I was trying to put FullCalendar 2.1.1 but it is not working:
<link href="https://stackoverflow.com/css/fullcalendar.css" rel="stylesheet" />
<link href="http://stackoverflow.com/css/fullcalendar.min.css" rel="stylesheet" />
<link href="http://stackoverflow.com/css/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="/js/moment.min.js"></script>
<script src="https://stackoverflow.com/js/jquery.min.js"></script>
<script src="/js/fullcalendar.min.js"></script>
<script src="/js/jquery-ui.custom.min.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
</script>
When I go to try open it I get the following errors:
SyntaxError: missing ) after argument list ..."'").replace(/"/g,""").replace(/\n/g,"")}function P(t){returnt.replace(/
TypeError: $(...).fullCalendar is not a function
eventLimit: true, // allow "more" link when too many events
I have followed the Basic Usage Documentation but it still doesn’t work.
I think you have problem with js try the below urls it may solve your problems,
<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.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>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
</script>
If the above code works then download the js files used in script tag
I also had same problem and it was because the HTML jQuery file was loading twice, hence it was giving me error.
I’ve solved the problem simply changing order of my scripts. You must be set:
moment.min.js after jquery.min.js look this:
<script src="https://stackoverflow.com/js/jquery.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/fullcalendar.min.js"></script>
For anyone coming across this, there was only one solution working for me. I’m using webpack to compile my scripts and nothing was working for me, no matter what order I had require('fullcalendar') placed in my main.js file.
I had to downgrade to version 3.4.0. It instantly solved the problem.
npm install --save [email protected]
If using ES6 syntax, just add this at the start of your file:
import "fullcalendar";
I had the same problem. I used sitemesh and decorators.
the problem solved when I injected the JS script’s links twice both in the decorator and the webpage!
The order is important too ,use following order :
<script src="https://stackoverflow.com/questions/26252938/resource/bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../resource/bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="../../resource/dist/js/demo.js"></script>
<script src="../../resource/bower_components/moment/moment.js"></script>
<script src="../../resource/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
I got this issue when working with node version 14. Use node version 15 to resolve this issue.
I might be late to the party but I was having a similar issue and I resolved it.
The versions that I was using in my Angular 6 Project were:
@angular/animations": "^6.0.9",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.0.9",
"@angular/compiler": "^6.0.9",
"@angular/core": "^6.0.9",
"fullcalendar": "^3.10.1",
"jquery": "^3.3.1",
.....
I changed the version for fullcalendar to 3.9.0 along with jquery to ^3.4.1 and it happily resolved my issue.
(fullcalendar v5.5.0)
Seems fullCalendar() is not available anymore(not 100% sure).
I wanted to refresh when onchange event so I tried below first,
$('#calendar').fullCalendar('refetchEventSources', sources);
but got the same error message as above ( ~ not a function)
tried all answers on google but not for me.
finally below solved my problem.
$('select').change(function() {
var newSource = {
url: myUrl,
type: 'POST',
extraParams: {
myParam: newParam
}
}
// remove original source
var orgSource = calendar.getEventSources();
orgSource[0].remove();
// add new source
// new events will be immediately fetched from this source
// and placed on the calendar.
calendar.addEventSource(newSource);
// this is not working
//$('#calendar').fullCalendar('refetchEventSources', newSource);
}
please also check below official site:
