DCR
Reputation: 15657
fullcalendar 5.5.1 is not a function
I'm trying to update from fullcalendar 2.6.1 to fullcalendar 5.5.1 but am getting fullcalendar is not a function error in the console.
You can see version fullcalendar 2.6.1 in the snippet. If toggle the css and js to switch to version 5.5.1 you can see the problem
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extendx FullCalendar Events with Bootstrap Modal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!--********************toggle this css*************************-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" type="text/css" rel="stylesheet" />
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">-->
<!--********************toggle this css*************************-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>FullCalendar Events with Bootstrap Modal</h1>
<p>from <a href="http://www.mikesmithdev.com/blog/fullcalendar-event-details-with-bootstrap-modal/" target="_blank">http://www.mikesmithdev.com/blog/fullcalendar-event-details-with-bootstrap-modal/</a></p>
<br />
<div id="bootstrapModalFullCalendar"></div>
</div>
</div>
</div>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="eventUrl" target="_blank">Event Page</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<!--********************toggle this js*************************-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>-->
<!--********************toggle this js*************************-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#bootstrapModalFullCalendar').fullCalendar({
header: {
left: '',
center: 'prev title next',
right: ''
},
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
return false;
},
events:
[
{
"title":"Free Pizza",
"allday":"false",
"description":"<p>This is just a fake description for the Free Pizza.</p><p>Nothing to see!</p>",
"start":moment().subtract(14,'days'),
"end":moment().subtract(14,'days'),
"url":"http://www.mikesmithdev.com/blog/coding-without-music-vs-coding-with-music/"
},
{
"title":"DNUG Meeting",
"allday":"false",
"description":"<p>This is just a fake description for the DNUG Meeting.</p><p>Nothing to see!</p>",
"start":moment().subtract(10,'days'),
"end":moment().subtract(10,'days'),
"url":"http://www.mikesmithdev.com/blog/youtube-video-event-tracking-with-google-analytics/"
},
{
"title":"Staff Meeting",
"allday":"false",
"description":"<p>This is just a fake description for the Staff Meeting.</p><p>Nothing to see!</p>",
"start":moment().subtract(6,'days'),
"end":moment().subtract(6,'days'),
"url":"http://www.mikesmithdev.com/blog/what-if-your-website-were-an-animal/"
},
{
"title":"Poker Night",
"allday":"false",
"description":"<p>This is just a fake description for the Poker Night.</p><p>Nothing to see!</p>",
"start":moment().subtract(2,'days'),
"end":moment().subtract(2,'days'),
"url":"http://www.mikesmithdev.com/blog/how-to-make-a-qr-code-in-asp-net/"
},
{
"title":"NES Gamers",
"allday":"false",
"description":"<p>This is just a fake description for the NES Gamers.</p><p>Nothing to see!</p>",
"start":moment(),
"end":moment(),
"url":"http://www.mikesmithdev.com/blog/name-that-nes-soundtrack/"
},
{
"title":"XBox Tourney",
"allday":"false",
"description":"<p>This is just a fake description for the XBox Tourney.</p><p>Nothing to see!</p>",
"start":moment().add(3,'days'),
"end":moment().add(3,'days'),
"url":"http://www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/"
},
{
"title":"Pool Party",
"allday":"false",
"description":"<p>This is just a fake description for the Pool Party.</p><p>Nothing to see!</p>",
"start":moment().add(5,'days'),
"end":moment().add(5,'days'),
"url":"http://www.mikesmithdev.com/blog/jquery-full-calendar/"
},
{
"title":"Staff Meeting",
"allday":"false",
"description":"<p>This is just a fake description for the Staff Meeting.</p><p>Nothing to see!</p>",
"start":moment().add(9,'days'),
"end":moment().add(9,'days'),
"url":"http://www.mikesmithdev.com/blog/keep-important-licensing-comments-dotnet-bundling-minification/"
},
{
"title":"Poker Night",
"allday":"false",
"description":"<p>This is just a fake description for the Poker Night.</p><p>Nothing to see!</p>",
"start":moment().add(11,'days'),
"end":moment().add(11,'days'),
"url":"http://www.mikesmithdev.com/blog/aspnet-bundling-changes-output-with-user-agent-eureka-1/"
},
{
"title":"Hackathon",
"allday":"false",
"description":"<p>This is just a fake description for the Hackathon.</p><p>Nothing to see!</p>",
"start":moment().add(15,'days'),
"end":moment().add(15,'days'),
"url":"http://www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/"
},
{
"title":"Beta Testing",
"allday":"false",
"description":"<p>This is just a fake description for the Beta Testing.</p><p>Nothing to see!</p>",
"start":moment().add(22,'days'),
"end":moment().add(22,'days'),
"url":"http://www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/"
},
{
"title":"Perl Meetup",
"allday":"false",
"description":"<p>This is just a fake description for the Perl Meetup.</p><p>Nothing to see... though no one would show up any way.</p>",
"start":moment().subtract(20,'days'),
"end":moment().subtract(20,'days'),
"url":"http://www.mikesmithdev.com/blog/migrating-from-asp-net-to-ghost-node-js/"
},
{
"title":"Node.js Meetup",
"allday":"false",
"description":"<p>This is just a fake description for the Node.js Meetup.</p><p>Nothing to see!</p>",
"start":moment().add(25,'days'),
"end":moment().add(25,'days'),
"url":"http://www.mikesmithdev.com/blog/pdf-secure-access-and-log-downloads/"
},
{
"title":"Javascript Meetup",
"allday":"false",
"description":"<p>This is just a fake description for the Javascript Meetup.</p><p>Nothing to see!</p>",
"start":moment().subtract(27,'days'),
"end":moment().subtract(27,'days'),
"url":"http://www.mikesmithdev.com/blog/migrating-from-asp-net-to-ghost-node-js/"
},
{
"title":"HTML Meetup",
"allday":"false",
"description":"<p>This is just a fake description for the HTML Meetup.</p><p>Nothing to see!</p>",
"start":moment().subtract(22,'days'),
"end":moment().subtract(22,'days'),
"url":"http://www.mikesmithdev.com/blog/migrating-from-asp-net-to-ghost-node-js/"
},
{
"title":"CSS Meetup",
"allday":"false",
"description":"<p>This is just a fake description for the CSS Meetup.</p><p>Nothing to see!</p>",
"start":moment().add(27,'days'),
"end":moment().add(27,'days'),
"url":"http://www.mikesmithdev.com/blog/migrating-from-asp-net-to-ghost-node-js/"
}
]
});
});
</script>
</body>
</html>Upvotes: 1
Views: 1106
Answers (1)
mkours
Reputation: 510
Fullcalender supports since 4.x no jQuery any more.
So
$(document).ready(function() {
$('#bootstrapModalFullCalendar').fullCalendar({ ...
would not work any more.
Replace it by
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('bootstrapModalFullCalendar');
var calendar = new FullCalendar.Calendar(calendarEl, { ...
But of cause you can use JQuery inside your functions.
Also a lot of other things change. But a short look on the rest of your code tells me, that you didn't use anything of if. So, if you have look, that's all.
Upvotes: 2
Related Questions
- FullCalendar TypeError: $(...).fullCalendar is not a function
- FullCalendar v5 - TypeError: $(...).fullCalendar is not a function
- Uncaught ReferenceError: FullCalendar is not defined
- How can I resolve fullCalendar is not a function TypeError error?
- fullcalendar cannot read property 'fn' of undefined
- Uncaught TypeError: $(...).fullCalendar is not a function error
- FullCalendar v4 - fullCalendar is not a function
- uncaught typeError: .fullCalendar() is not a function with fullCalendar v4
- Uncaught TypeError: Cannot read property 'fullCalendar' of undefined
- Uncaught TypeError: undefined is not a function fullcalendar