未捕获的 TypeError: $(...).fullCalendar 不是函数(...)答案

【问题标题】：Uncaught TypeError: $(...).fullCalendar is not a function(…)未捕获的 TypeError: $(...).fullCalendar 不是函数(...)
【发布时间】：2017-05-15 19:33:48
【问题描述】：

$(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 Uncaught TypeError: $(...).fullCalendar is not a function(...)

我的头部是这样的

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

通过我的 sn-p，我添加了 /lib/moment.min.js，我确认此文件可以从我的本地计算机正常加载。

【问题讨论】：

把你的脚本放在你的html底部而不是head标签
@SamarRizvi 我已经试过了。到目前为止没有运气。
你能拿出小提琴来检查一下吗
您是否尝试下载 javascript 文件？可能是文件加载错误？
您尝试过以下建议吗？你能附上你的整个html文件吗？它可能与您的文件顺序有关，因为此错误意味着您正在使用的 jquery 上未正确安装 fullCalendar 插件。有时这意味着您的项目中有多个 jquery 实例...

标签： jquery laravel-5 fullcalendar laravel-blade

【解决方案1】：

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

Codepen 演示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>

【讨论】：

【解决方案2】：

在包含您的 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>

【讨论】：

【解决方案3】：

感谢大家抽出宝贵时间来帮助我。我发现我有其他 .js 文件位于导致此问题的页面底部。我注释掉了 .js，我的刀片模板上显示了日历。谢谢大家。

【讨论】：

怎么样？在我的模板中，我只有一个 jquery，但错误仍然存在