I'm working on a simple cms app but I can't get the Full Calendar plugin to display the calendar. I've followed the steps that I found online and nothing has worked. I've been trying to solve this problem for a week and can't figure it out. I've checked the console for errors and it looks good.
So I wanted to reach out. My app is built in PHP, my code is included below. I've linked to everything and the jquery is working.
The code for the calendar I've included in the head section.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href=".1.0/fullcalendar.min.css" rel="stylesheet" />
<script src=".1.1/jquery.min.js"></script>
<script src=".js/2.17.1/moment.min.js"></script>
<script src=".1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="css/admin-main.css">
<title>CMS</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});
</script>
</head>
In the HTML on the calendar page I have this included.
<div id="calendar"></div>
Any help would be greatly appreciated! Thanks!
I'm working on a simple cms app but I can't get the Full Calendar plugin to display the calendar. I've followed the steps that I found online and nothing has worked. I've been trying to solve this problem for a week and can't figure it out. I've checked the console for errors and it looks good.
So I wanted to reach out. My app is built in PHP, my code is included below. I've linked to everything and the jquery is working.
The code for the calendar I've included in the head section.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="css/admin-main.css">
<title>CMS</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});
</script>
</head>
In the HTML on the calendar page I have this included.
<div id="calendar"></div>
Any help would be greatly appreciated! Thanks!
Share Improve this question edited Jan 26, 2017 at 17:49 jkloster7 asked Jan 25, 2017 at 22:21 jkloster7jkloster7 391 gold badge1 silver badge8 bronze badges 2- 1 Lol, check here: jsfiddle/Syden/ozeuoLtp/9 - it's working with everything exactly as you have above. – Syden Commented Jan 26, 2017 at 18:07
- Huh. Ok well that's good to know. Thanks! For some reason it doesn't display on my xampp server. Weird. Thanks again! – jkloster7 Commented Jan 27, 2017 at 18:02
2 Answers
Reset to default 2I know this question is old and you may have already found the solution, however, i will give my answer to help anyone else that may be running into the same issue.
I found that when the console is giving you the error that fullcalendar is not a function and your code seems to be correct, its for the following reason.
If you are using bootstrap, you need to remove the Jquery link provided in the bootstrap starter template. You have already loaded jquery in the header, by doing it again in the body, it is creating the error.. I hope it helps!
You have an extra ) on .fullCalendar(), should be:
$('#calendar').fullCalendar({
//options
});
Example below:
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});<link href="https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div id="calendar"></div>