Question

只是尝试将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>

Answer 1

删除<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

Answer 2

您的代码存在错误（不需要的<style>代码），我已在下面进行了更正。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: