Javascript 完整日历显示,无css或任何错误

Javascript 完整日历显示,无css或任何错误,javascript,html,css,fullcalendar,Javascript,Html,Css,Fullcalendar,所以我尝试在我的网站上安装完整的日历,在发布了一些问题之后,我成功地达到了一个没有错误的程度,但是日历本身没有正确显示(就像它没有css一样) 我查过了,据我所知,所有需要引用的文件都是 任何帮助都将不胜感激 <!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta

所以我尝试在我的网站上安装完整的日历,在发布了一些问题之后,我成功地达到了一个没有错误的程度,但是日历本身没有正确显示(就像它没有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">
    &#9400; 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>

ipt>
$(文档).ready(函数(){
$(“#日历”).fullCalendar({
googleCalendarApiKey:“KEY”,
活动:{
谷歌日历ID:'ID@group.calendar.google.com'
}
});
});
西巴阿姆
切换导航
历法 Ⓒ 2017年宾夕法尼亚州西部ARML团队
这就是它的样子-
您将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">

您的代码存在一些问题(从原始编辑到当前版本):

1) 您需要确保您的CSS和JS文件都基于相同版本的fullCalendar,并且您的jQuery和momentJS文件是兼容的版本,并且以正确的顺序加载(分别参见和)

2) 不要将fullCalendar.io用作CDN。请使用推荐的CDNJS站点(根据),或者自己下载并托管文件

3)
window.jQuery | | document.write(“”)
似乎是多余的,因为上面已经包含了jQuery

4)
gcal.js
需要在
fullCalendar.js
之后加载,因为它依赖于它才能正常工作

5) 我意识到您的
标记指定不正确。您需要将URL放在“href”属性中,而不是“src”(用于脚本标记)。参见fpr规范

6) 您正在将“打印”CSS和常规CSS都加载到代码中,但是“打印”样式将覆盖常规样式(因为它是稍后加载的)。您需要将媒体查询放在“打印”查询中,以确保它仅在用户尝试打印页面时使用。e、 g

<link href="src/fullcalendar.print.css" rel="stylesheet" media="print">


其他补充意见:

1) 您不需要jQueryUI就可以使用它,页面上的其他任何东西似乎都无法使用它,因此您可以删除它


2) 您的HTML位于
标记之外。这是无效的。要显示的任何内容都应该在
中。许多浏览器可能可以容忍这个问题,但它是凌乱的、技术上无效的HTML,因此您不能期望它总是正常工作。

对不起,我很困惑,我的链接不是css吗?啊,我明白了!我试了一下,但它看起来还是一样:(没问题,我不想让人觉得我很粗鲁,所以我也为此道歉。你不需要jQuery UI。如果你出于任何原因决定要它,它托管在同一个CDN上,或者你可以从下载它。它有一些有用的功能,但与此问题没有直接关系。不幸的是,我看不到你当前的代码,也不知道是什么原因。)你真的把一切都搞定了。如果你仍然有错误,这似乎不太可能。你是否尝试过我的建议,使用我给你的JSFIDLE链接,把你的谷歌凭证放在那里,看看你是否能看到日历?如果行得通,它排除了你的谷歌信息是问题的根源。你还可以编辑问题以显示你的cu最近的代码,这将是很有帮助的。玩一个简单的游戏,找出小提琴和你的版本之间的差异,你只需要在fullCalendar.min.js之后加载gcal.js。这很有意义,因为它是fullCalendar功能的扩展。这取决于fullCalendar功能,如果在fullCalendar之前加载,它就不存在r、 1)我意识到您的
链接
标记指定不正确。您需要将URL放在“href”属性中,而不是“src”(用于
脚本
标记)。请参见2)您正在将“打印”CSS和常规CSS都加载到代码中,但“打印”样式将覆盖常规样式(因为它是稍后加载的)。您需要将媒体查询放在“打印”查询中,以确保它仅在用户尝试打印页面时使用。e、 g.