FullCalendar显示没有css或任何错误
因此，我试图在我的网站上安装完整的日历，在几个问题之后，我设法达到了这样的程度:我没有错误，但日历本身并没有正确显示(就像它没有css一样)。
我检查了，据我所知，所有需要引用的文件都是。
任何帮助都将不胜感激！
<!DOCTYPE html><head> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="src/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- FullCalender files references -->
<script src="src/jquery.js"></script>
<script src='src/moment.min.js'></script>
<script src='src/fullcalendar.min.js'></script>
<script src="src/gcal.js"></script>
<!-- Custom styles for this template -->
<link href="components/style.css" rel="stylesheet">
<link src="src/fullcalendar.min.css" rel="stylesheet">
<link src="src/fullcalendar.print.css" rel="stylesheet">ipt>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'KEY',
events: {
googleCalendarId: 'ID@group.calendar.google.com'
}
});
});
</script><title>Western PA ARML</title></head> <nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Western PA ARML</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--<li><a href="index.html">Home</a></li> -->
<li><a href="calendar.html">Calendar</a></li>
<li><a href="join.html">Join the Team</a></li>
<li><a href="coaches.html">People</a></li>
<li><a href="archive.html">Archive</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
<!--<li><a href="pictures.html">Photos</a></li>-->
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<body>
<div id="content"><div class="section">
<h1>Calendar</h1>
<div id='calendar'></div>
</div> </div> <!--Content-->
<div class="footer">
Ⓒ 2017 Western Pennsylvania ARML Team
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>-->
</body>
</html>它看起来就是这样-
回答 2
Stack Overflow用户
发布于 2018-02-13 16:13:14
在代码中有一些问题(从原始编辑开始到当前版本)：
1)您需要确保您的CSS和JS文件都基于相同版本的fullCalendar，并且您的jQuery和momentJS文件是兼容的版本，并按正确的顺序加载(分别参见https://fullcalendar.io/support/和https://fullcalendar.io/docs/usage/ )。
2)不要使用fullCalendar.io作为CDN。要么使用推荐的CDNJS站点(如https://fullcalendar.io/download/)，要么自己下载并托管文件。
3) <script>window.jQuery || document.write('<script src="src/jquery.js"><\/script>')</script>似乎是多余的，因为您已经在上面包含了jQuery。
4) gcal.js需要在fullCalendar.js之后加载，因为它依赖于它才能正常工作。
5)我意识到你的<link>标签被错误地指定了。您需要将URL放在"href“属性中，而不是"src”(用于脚本标记)中。参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link fpr规范。
6)您正在将"print“CSS和普通CSS都加载到代码中，但是"print”样式将覆盖常规样式(因为它将在稍后加载)。您需要将媒体查询放在“打印”查询中，以确保只有当用户尝试打印页面时才使用该查询。例如：
<link href="src/fullcalendar.print.css" rel="stylesheet" media="print">补充的附带意见：
1)您不需要jQuery就可以工作，而且页面上没有其他东西可以使用它，因此您可以删除它。
2)您有HTML，它位于<head>和<body>标记之外。这是无效的。您想要显示的任何内容都应该在<body>中。许多浏览器可能会容忍这个问题，但是它在技术上是无效的，所以您不能期望它总是正常工作。
Stack Overflow用户
发布于 2018-02-13 11:01:54
你把css放错地方了。
<link href="components/style.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css" rel="stylesheet">这样放置代码将导致外部css资源覆盖您的自定义css。
取而代之的是这样放置：
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css" rel="stylesheet">
<link href="components/style.css" rel="stylesheet">https://stackoverflow.com/questions/48765201
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号