Javascript Fullcalendar选项不起作用_Javascript_Jquery_Fullcalendar

Javascript Fullcalendar选项不起作用

javascript jquery fullcalendar

Javascript Fullcalendar选项不起作用,javascript,jquery,fullcalendar,Javascript,Jquery,Fullcalendar,我正在尝试使用FullCalendar。init函数中的所有选项都不起作用。没有控制台错误，也没有任何形式的反馈。当我尝试使用“header”选项时，实际的header似乎消失了这是我的HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

我正在尝试使用FullCalendar。init函数中的所有选项都不起作用。没有控制台错误，也没有任何形式的反馈。当我尝试使用“header”选项时，实际的header似乎消失了

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
  <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 -->
    <title>VetPro Dashboard</title>

    <!-- Style Css-->
    <link rel="stylesheet" href="../../assets/css/styles.css">
    <link rel="stylesheet" href="../../assets/fonts/fonts.css">
    <link rel="stylesheet" href="../../vendor/bower_components/fullcalendar/dist/fullcalendar.min.css">
    <link rel="stylesheet" href="../../vendor/bower_components/fullcalendar/dist/fullcalendar.print.css">

    <!-- jQuery -->
    <script type="text/javascript" src="../../vendor/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../../vendor/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../vendor/bower_components/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="../../vendor/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
    <script type="text/javascript" src="../../assets/javascripts/calendar_scheduler.js"></script>
  </head>

  <body class="split-background">

    <!-- Start Body -->
    <div class="container-fluid" id="vetpro-dashboard">
      <div class="container container-border">
        <div class="col-md-6">
          <div id="calendar">
          </div>
        </div>
        <div class="col-md-6" id="exceptions">
          <div id="scheduler">
            <div id="timepicker">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Body -->

  </body>
</html>

这里怎么了？我怎样才能解决这个问题

谢谢

看起来文档中没有提到包含“print.css”文件会毁掉其他一切。删除该行解决了问题。

看起来文档中没有涵盖包含“print.css”文件会破坏其他一切的内容。删除该行解决了问题。

如果包含fullcalendar.print.css，请使用media=“print”指示仅当打印完整日历库中有主题选项时才应使用该行。如果将其设置为true，则需要使用外部样式，如jquery ui主题。如果包含fullcalendar.print.css，请使用media=“print”指示仅当打印完整日历库中有主题选项时才应使用它。如果将其设置为true，则需要使用外部样式，如jqueryui主题。

(function() {
  'use strict';

    $(document).ready(function(){
        // Full calendar
        $('#calendar').fullCalendar({
            header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },
            dayClick: function(date, jsEvent, view) {
        alert('Clicked on: ' + date.format());
        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        alert('Current view: ' + view.name);
        // change the day's background color just for fun
        $(this).css('background-color', 'red');
        }
    });


        // Moment.js locale
        moment.locale('en', {
            calendar : {
                lastDay : '[Yesterday]',
                sameDay : '[Today]',
                nextDay : '[Tomorrow]',
                lastWeek : '[last] dddd',
                nextWeek : 'dddd',
                sameElse : 'dddd'
            }
        });
    });
})();