完整的日历样式未在网站中显示

只是试图将FullCalendar的基本配置弹出到我的网站上，并且由于某种原因，CSS不起作用。我一直在玩不同链接的顺序和版本，但没有运气。这是我的代码：

<head>
  <div id="calendar1"></div>
  <script src="http://fullcalendar.io/js/fullcalendar-2.7.1/lib/moment.min.js"></script>
  <script src="http://fullcalendar.io/js/fullcalendar-2.7.1/lib/jquery.min.js"></script>
  <script src="http://fullcalendar.io/js/fullcalendar-2.7.1/fullcalendar.min.js"></script>
  <style><link rel='stylesheet' type="text/css" href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css'/></style>
  <script>
    $(document).ready(function() {
        $('#calendar1').fullCalendar({
            defaultDate: '2014-09-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
        });
    });
  </script>
</head>

删除<style>标签！

更改

<style><link rel='stylesheet' type="text/css" href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css'/></style>

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css'>

有关更多信息，请参见此链接：http：//www.w3schools.com/css/css_howto.asp

您在代码上有一些错误（<style>标签），我在下面进行了更正。

$(document).ready(function() {
    $('#calendar1').fullCalendar({
    defaultDate: '2014-09-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    });
    });

<script src="http://fullcalendar.io/js/fullcalendar-2.7.1/lib/moment.min.js"></script>
  <script src="http://fullcalendar.io/js/fullcalendar-2.7.1/lib/jquery.min.js"></script>
  <script src="http://fullcalendar.io/js/fullcalendar-2.7.1/fullcalendar.min.js"></script>
 <link rel='stylesheet' type="text/css" href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css'/></style>
  
<div id="calendar1"></div>

相关内容

最新更新

热门标签：