FullCalendar not Displaying Events Correctly
Question
I am having trouble with the FullCalendar js library not displaying events correctly. I'm not sure what the issue is as I have followed the instructions on their introduction page, but the events are always displayed at the very bottom of the calendar and are never 'inline' with the times.
<html>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />
<!--<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.print.css" type="text/css">-->
<script src="assets/plugins/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.js"></script>
<script>
moment().format();
function httpGet(url) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
$(document).ready(function () {
// page is now ready, initialize the calendar...
//var eventsArray = JSON.parse(httpGet("Schedule.php"));
$('#calendar').fullCalendar({
// put your options and callbacks here
//timezone: 'America/Denver',
header: {
left: '',
center: 'title',
right: ''
},
theme:true,
events: [
{
"title":"Washer & Dryer",
"editable":false,
"start":"2017-04-09T00:30:00-0600",
"end":"2017-04-09T06:30:00-0600",
"img_loc":"washer.png"
},
{
"title":"Dishwasher",
"editable":false,
"start":"2017-04-09T02:56:00-0600",
"end":"2017-04-09T04:56:00-0600",
"img_loc":"dishwasher.jpg"
}
],
defaultView: "agendaDay"
})
});
</script>
<style type='text/css'>
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2017-04-09 22:52:53
You need to use an href attribute instead of an src in the <link> tag that references the fullcalendar stylesheet. Your fourth line should look like this:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />
Demo:
http://jsbin.com/tojohiwuke/1/edit?html,output
(I also changed jquery to use a CDN in my example.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.