Question

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
        left:   'Calendar',
        center: '',
        right:  'today prev,next'
    })

});

<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='/js/fullcalendar/lib/moment.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href='/js/fullcalendar/fullcalendar.css' />
    </head>
  <body>
  <div id='calendar'></div>
  </body>

  </html>

我正在尝试使用我的刀片模板添加日历，最终我遇到了这个错误。

app.js：3未捕获TypeError：$（...）。fullCalendar不是函数（...）

我的头部看起来像这样

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='/js/fullcalendar/lib/moment.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
<link rel='stylesheet' href='/js/fullcalendar/fullcalendar.css' />

然后我在准备好的事件上调用fullCalender

<script>
$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});
</script>

使用CDN我正在尝试获取最新的Jquery和FullCalendar。

使用我的代码片段，我添加了/lib/moment.min.js，我确认此文件可以从我的本地计算机上正常加载。

Answer 1

包含jquery库后包含脚本

    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://momentjs.com/downloads/moment.min.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script>
        <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />
        </head>
      <body>
         <div id='calendar'></div>

        <script>
            $(document).ready(function() {

            // page is now ready, initialize the calendar...

            $('#calendar').fullCalendar({
                // put your options and callbacks here
                left:   'Calendar',
                center: '',
                right:  'today prev,next'
                });

            });
        </script>
      </body>
      </html>

Answer 2

你的jquery ui在哪里，你需要在底部运行脚本并在顶部运行css。

Codepen Demo http://codepen.io/norcaljohnny/pen/OWLjaX

<head>
<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' />
</head>

<body>
<div id='calendar'></div>

<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script>
</body>

这是开发人员的示例来源。

> <meta charset='utf-8' /> <link href='../fullcalendar.min.css'
> rel='stylesheet' /> <link href='../fullcalendar.print.min.css'
> rel='stylesheet' media='print' /> <script
> src='../lib/moment.min.js'></script> <script
> src='../lib/jquery.min.js'></script> <script
> src='../lib/jquery-ui.min.js'></script> <script
> src='../fullcalendar.min.js'></script> <script>

Answer 3

我很感谢你花时间来帮助我。我发现我的页面底部有其他.js文件，导致此问题。我评论说.js和我在我的刀片模板上显示了日历。谢谢大家。

未捕获的TypeError：$（...）。fullCalendar不是函数（...）

3 个答案: