Question

所以我试图在我的网站上安装完整的日历，在几个问题之后，我设法达到了一个我没有错误但是日历本身没有正确显示的地方（就像它没有有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>

它的外观 -

Answer 1

您的代码存在的一些问题（从原始编辑到当前版本）：

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-UI就可以了，你的页面上没有任何其他东西似乎可以使用它，所以你可以删除它。

2）您的HTML不在<head>和<body>标记之内。这是无效的。您要显示的任何内容都应位于<body>内。许多浏览器可能会容忍这个问题，但它是凌乱的，技术上无效的HTML，所以你不能期望它始终正常工作。

Answer 2

您将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">

FullCalendar显示没有CSS或任何错误

2 个答案: