fullcalendar 5.5.1 不是函数答案

【问题标题】：fullcalendar 5.5.1 is not a functionfullcalendar 5.5.1 不是函数
【发布时间】：2021-01-31 17:59:47
【问题描述】：

我正在尝试从 fullcalendar 2.6.1 更新到 fullcalendar 5.5.1，但我发现 fullcalendar is not a function error in the console。

您可以在 sn-p 中看到版本 fullcalendar 2.6.1。如果切换css和js切换到5.5.1版就可以看到问题了

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extendx FullCalendar Events with Bootstrap Modal</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<!--********************toggle this css*************************-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" type="text/css" rel="stylesheet" />
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.css">-->
<!--********************toggle this css*************************-->

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1>FullCalendar Events with Bootstrap Modal</h1>
                <p>from <a href="http://www.mikesmithdev.com/blog/fullcalendar-event-details-with-bootstrap-modal/" target="_blank">http://www.mikesmithdev.com/blog/fullcalendar-event-details-with-bootstrap-modal/</a></p>
                <br />
                <div id="bootstrapModalFullCalendar"></div>
            </div>
        </div>
    </div>

    <div id="fullCalModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div id="modalBody" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a class="btn btn-primary" id="eventUrl" target="_blank">Event Page</a>
                </div>
            </div>
        </div>
    </div>




    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
    

<!--********************toggle this js*************************-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js"></script>-->
<!--********************toggle this js*************************-->



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {
            $('#bootstrapModalFullCalendar').fullCalendar({
                header: {
                    left: '',
                    center: 'prev title next',
                    right: ''
                },
                eventClick:  function(event, jsEvent, view) {
                    $('#modalTitle').html(event.title);
                    $('#modalBody').html(event.description);
                    $('#eventUrl').attr('href',event.url);
                    $('#fullCalModal').modal();
                    return false;
                },
                events:
                [
                   {
                      "title":"Free Pizza",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Free Pizza.</p><p>Nothing to see!</p>",
                      "start":moment().subtract(14,'days'),
                      "end":moment().subtract(14,'days'),
                      "url":"http://www.mikesmithdev.com/blog/coding-without-music-vs-coding-with-music/"
                   },
                   {
                      "title":"DNUG Meeting",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the DNUG Meeting.</p><p>Nothing to see!</p>",
                      "start":moment().subtract(10,'days'),
                      "end":moment().subtract(10,'days'),
                      "url":"http://www.mikesmithdev.com/blog/youtube-video-event-tracking-with-google-analytics/"
                   },
                   {
                      "title":"Staff Meeting",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Staff Meeting.</p><p>Nothing to see!</p>",
                      "start":moment().subtract(6,'days'),
                      "end":moment().subtract(6,'days'),
                      "url":"http://www.mikesmithdev.com/blog/what-if-your-website-were-an-animal/"
                   },
                   {
                      "title":"Poker Night",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Poker Night.</p><p>Nothing to see!</p>",
                      "start":moment().subtract(2,'days'),
                      "end":moment().subtract(2,'days'),
                      "url":"http://www.mikesmithdev.com/blog/how-to-make-a-qr-code-in-asp-net/"
                   },
                   {
                      "title":"NES Gamers",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the NES Gamers.</p><p>Nothing to see!</p>",
                      "start":moment(),
                      "end":moment(),
                      "url":"http://www.mikesmithdev.com/blog/name-that-nes-soundtrack/"
                   },
                   {
                      "title":"XBox Tourney",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the XBox Tourney.</p><p>Nothing to see!</p>",
                      "start":moment().add(3,'days'),
                      "end":moment().add(3,'days'),
                      "url":"http://www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/"
                   },
                   {
                      "title":"Pool Party",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Pool Party.</p><p>Nothing to see!</p>",
                      "start":moment().add(5,'days'),
                      "end":moment().add(5,'days'),
                      "url":"http://www.mikesmithdev.com/blog/jquery-full-calendar/"
                   },
                   {
                      "title":"Staff Meeting",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Staff Meeting.</p><p>Nothing to see!</p>",
                      "start":moment().add(9,'days'),
                      "end":moment().add(9,'days'),
                      "url":"http://www.mikesmithdev.com/blog/keep-important-licensing-comments-dotnet-bundling-minification/"
                   },
                   {
                      "title":"Poker Night",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Poker Night.</p><p>Nothing to see!</p>",
                      "start":moment().add(11,'days'),
                      "end":moment().add(11,'days'),
                      "url":"http://www.mikesmithdev.com/blog/aspnet-bundling-changes-output-with-user-agent-eureka-1/"
                   },
                   {
                      "title":"Hackathon",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Hackathon.</p><p>Nothing to see!</p>",
                       "start":moment().add(15,'days'),
                      "end":moment().add(15,'days'),
                      "url":"http://www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/"
                   },
                   {
                      "title":"Beta Testing",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Beta Testing.</p><p>Nothing to see!</p>",
                      "start":moment().add(22,'days'),
                      "end":moment().add(22,'days'),
                      "url":"http://www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/"
                   },
                   {
                      "title":"Perl Meetup",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Perl Meetup.</p><p>Nothing to see... though no one would show up any way.</p>",
                      "start":moment().subtract(20,'days'),
                      "end":moment().subtract(20,'days'),
                      "url":"http://www.mikesmithdev.com/blog/migrating-from-asp-net-to-ghost-node-js/"
                   },
                   {
                      "title":"Node.js Meetup",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Node.js Meetup.</p><p>Nothing to see!</p>",
                      "start":moment().add(25,'days'),
                      "end":moment().add(25,'days'),
                      "url":"http://www.mikesmithdev.com/blog/pdf-secure-access-and-log-downloads/"
                   },
                   {
                      "title":"Javascript Meetup",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the Javascript Meetup.</p><p>Nothing to see!</p>",
                      "start":moment().subtract(27,'days'),
                      "end":moment().subtract(27,'days'),
                      "url":"http://www.mikesmithdev.com/blog/migrating-from-asp-net-to-ghost-node-js/"
                   },
                   {
                      "title":"HTML Meetup",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the HTML Meetup.</p><p>Nothing to see!</p>",
                      "start":moment().subtract(22,'days'),
                      "end":moment().subtract(22,'days'),
                      "url":"http://www.mikesmithdev.com/blog/migrating-from-asp-net-to-ghost-node-js/"
                   },
                   {
                      "title":"CSS Meetup",
                      "allday":"false",
                      "description":"<p>This is just a fake description for the CSS Meetup.</p><p>Nothing to see!</p>",
                      "start":moment().add(27,'days'),
                      "end":moment().add(27,'days'),
                      "url":"http://www.mikesmithdev.com/blog/migrating-from-asp-net-to-ghost-node-js/"
                   }
                ]
            });
        });
    </script>
</body>
</html>

【问题讨论】：

这是一个完全不同的主要版本，预计会有许多重大变化，包括初始化小部件的方式，请参阅他们的文档以查看新版本所需的更改
@Zac，文档没有任何帮助。你知道怎么做吗？您会在文档中的哪个位置查看？
我不使用它，但是从不同版本的Docs中，从版本4开始，很明显不再使用version 3和更早版本中使用的.fullCalendar()，而是，你需要像这样使用它：new FullCalendar.Calendar(calendarElement, { ..... }); in version 5
@Zac，谢谢你成功了
您可能还想阅读fullcalendar.io/docs/v4/upgrading-from-v3，然后阅读fullcalendar.io/docs/upgrading-from-v4（第一个是主要块，但也有一些零碎的内容从 4 更改为 5，因此您会得到一个累积图片）。如果你花时间的话，fullCalendar 的网站上有一些非常有用的文档。

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

Fullcalender 自 4.x 起不再支持 jQuery。

所以

 $(document).ready(function() {
            $('#bootstrapModalFullCalendar').fullCalendar({  ...

不会再工作了。

替换为

document.addEventListener('DOMContentLoaded', function() {
 var calendarEl = document.getElementById('bootstrapModalFullCalendar'); 
 var calendar = new FullCalendar.Calendar(calendarEl, { ...

当然，您可以在函数中使用 JQuery。

还有很多其他的事情发生了变化。但是对你的其余代码的简短查看告诉我，你没有使用任何 if。所以，如果你有看，就是这样。

【讨论】：