FullCalendar TypeError: $(...).fullCalendar 不是函数

Question

我试图安装 FullCalendar 2.1.1 但它不起作用：

<link href='/css/fullcalendar.css' rel='stylesheet' />
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='/js/moment.min.js'></script>
<script src='/js/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src="/js/jquery-ui.custom.min.js"></script>
<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      defaultDate: '2014-09-12',
      editable: true,
      eventLimit: true, // allow "more" link when too many events               
    });

  });
</script>

当我尝试打开它时，我收到以下错误：

SyntaxError: missing ) after argument list ..."'").replace(/"/g,""").replace(/\n/g,"")}function P(t){returnt.replace(/


TypeError: $(...).fullCalendar is not a function    
eventLimit: true, // allow "more" link when too many events

我遵循了基本使用文档，但它仍然不起作用。

Answer 1

我认为你的 js 有问题试试下面的 url 可能会解决你的问题，

<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            defaultDate: '2014-09-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
        });
    });
</script>

如果上述代码有效，则下载脚本标签中使用的js文件

Answer 2

我也遇到了同样的问题，这是因为 HTML jQuery 文件加载了两次，因此它给了我错误。

Answer 3

我已经解决了这个问题，只需更改脚本的顺序。您必须设置： moment.min.js 在jquery.min.js 之后看这个：

<script src='/js/jquery.min.js'></script>
<script src='/js/moment.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>

Answer 4

对于遇到此问题的任何人，只有一种解决方案适合我。我正在使用 webpack 来编译我的脚本，但无论我在 main.js 文件中将 require('fullcalendar') 放在什么顺序，都没有任何效果。

我不得不降级到版本3.4.0。它立即解决了问题。

npm install --save fullcalendar@3.4.0

Answer 5

如果使用 ES6 语法，只需在文件开头添加：

import "fullcalendar";

Answer 6

我遇到了同样的问题。我使用了 sitemesh 和装饰器。
当我在装饰器和网页中注入 JS 脚本的链接 两次 时，问题就解决了！
顺序也很重要，使用以下顺序：

<script src="../../resource/bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../resource/bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="../../resource/dist/js/demo.js"></script>
<script src="../../resource/bower_components/moment/moment.js"></script>
<script src="../../resource/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>

Answer 7

我在使用节点版本 14 时遇到了这个问题。使用节点版本 15 来解决这个问题。

Answer 8

我可能迟到了，但我遇到了类似的问题，我解决了。

我在 Angular 6 项目中使用的版本是：

@angular/animations": "^6.0.9",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.0.9",
"@angular/compiler": "^6.0.9",
"@angular/core": "^6.0.9",
"fullcalendar": "^3.10.1",
"jquery": "^3.3.1",
.....

我将 fullcalendar 的版本更改为 3.9.0，同时将 jquery 更改为 ^3.4.1，它很高兴地解决了我的问题。

Answer 9

（全日历 v5.5.0）

似乎 fullCalendar() 不再可用（不是 100% 确定）。 我想在 onchange 事件时刷新，所以我先在下面尝试，

$('#calendar').fullCalendar('refetchEventSources', sources);

但是得到了和上面一样的错误信息（~不是一个函数） 在谷歌上尝试了所有答案，但不适合我。 终于在下面解决了我的问题。

$('select').change(function() {
    var newSource = {
          url: myUrl,
          type: 'POST',
          extraParams: {
               myParam: newParam
          }
    }
    
    // remove original source
    var orgSource = calendar.getEventSources();
    orgSource[0].remove();
    
    // add new source
    // new events will be immediately fetched from this source 
    // and placed on the calendar.
    calendar.addEventSource(newSource);
    
    // this is not working
    //$('#calendar').fullCalendar('refetchEventSources', newSource);
}

请同时查看以下官方网站：

https://fullcalendar.io/docs/Calendar-addEventSource