admin管理员组文章数量:1426206
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>本文标签： javascriptFullCalendar Not Displaying CalendarStack Overflow
版权声明：本文标题：javascript - FullCalendar Not Displaying Calendar - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745471036a2659749.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论