FullCalendar 插件 3.1.0 未正确显示
Posted
技术标签:
【中文标题】FullCalendar 插件 3.1.0 未正确显示【英文标题】：FullCalendar plugin 3.1.0 is not displayed correctly 【发布时间】：2017-05-07 08:25:13 【问题描述】：当我执行以下代码时，FullCallendar 没有正确显示。我得到的结果如下：
根据 FullCallendar 演示，它应该如下所示： 调试控制台不显示任何错误。我究竟做错了什么？
$(document).ready(function()
$('#calendar').fullCalendar(
defaultDate: '2016-12-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
title: 'All Day Event',
start: '2016-12-01'
,
title: 'Long Event',
start: '2016-12-07',
end: '2016-12-10'
,
id: 999,
title: 'Repeating Event',
start: '2016-12-09T16:00:00'
,
id: 999,
title: 'Repeating Event',
start: '2016-12-16T16:00:00'
,
title: 'Conference',
start: '2016-12-11',
end: '2016-12-13'
,
title: 'Meeting',
start: '2016-12-12T10:30:00',
end: '2016-12-12T12:30:00'
,
title: 'Lunch',
start: '2016-12-12T12:00:00'
,
title: 'Meeting',
start: '2016-12-12T14:30:00'
,
title: 'Happy Hour',
start: '2016-12-12T17:30:00'
,
title: 'Dinner',
start: '2016-12-12T20:00:00'
,
title: 'Birthday Party',
start: '2016-12-13T07:00:00'
,
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-12-28'
]
);
);body
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
#calendar
max-width: 900px;
margin: 0 auto;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.css" rel="stylesheet" type="text/css" />
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>【问题讨论】：
此处输入错误 "$(document).ready(funcntio() ' 但看起来好像没有加载 css 文件。尝试刷新页面以查看是否应用了样式。 显然 css 和 js 加载正确。我已经清除了浏览器缓存，但我得到了相同的结果。 【参考方案1】：我刚刚查看了那个样式表，发现它的 URL 中有 print 这个词。然后我查看了代码，评论说它适用于打印机友好版本。看看你的截图，我同意这就是它正在做的事情。
我从 URL 中删除了.print，看起来这就是您需要的。
http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css
尝试删除用于打印机的那个。
【讨论】：
以上是关于FullCalendar 插件 3.1.0 未正确显示的主要内容，如果未能解决你的问题，请参考以下文章