fullCalendar 不是函数，事件未呈现

Question

我正在尝试运行一个使用 fullcalendar 交互插件的非常基本的脚本。 我希望用户通过在日历中标记正确的日期或时间来输入事件（选择）。 例如，在标记了 8 月 5 日到 8 月 9 日之后，提示会询问事件标题。 用户输入“假期”，脚本会自动将信息“从...到”流式传输到事件数据。 但问题是，在标记日期并输入事件标题后，该事件没有出现在日历上。

只要网站没有被重新加载，我也无法标记新事件。 另外firefox浏览器控制台说fullCalender不是一个功能。 在网上可以找到的关于这个问题的大部分内容是很可能是库没有正确加载，但根据浏览器控制台，它确实正确加载了。 日历是可见的，我可以选择日期，因此我没有看到问题。 我已经投入了几个小时......

我已经尝试将库从本地更改为 CDN，但没有任何改变。

这是我从 fullcalendar 和这个代码笔的文档中混合出来的代码： https ://codepen.io/JSFanatik/pen/QVvxvw

    <script type="text/javascript" src='/calendar/fullcalendar/jquery-3.4.1.min.js'></script>  
    <script type="text/javascript" src='/calendar/fullcalendar/dist/core/main.js'></script>
    <script type="text/javascript" src='/calendar/fullcalendar/dist/interaction/main.js'></script>
    <script type="text/javascript" src='/calendar/fullcalendar/dist/daygrid/main.js'></script>
    <script type="text/javascript" src='/calendar/fullcalendar/dist/timegrid/main.js'></script>
    <script type="text/javascript" src='/calendar/fullcalendar/dist/core/locales/de.js'></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {

                plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
                locale: "de",
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                }, 
                selectable: true,
                navLinks: true,
                defaultView: "dayGridMonth",
                selectable: true,
                selectHelper: false,
                editable: true,
                eventLimit: false, 

                select: function(start, end) {
                    var title = prompt("Event Title?");
                    var eventData;
                    if (title) {
                        eventData = {
                            title: title,
                            start: start,
                            end: end
                        };        
                        $("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
                    }
                    $("#calendar").fullCalendar("unselect");
                },

                eventRender: function(event, element) {
                    element
                    .find(".fc-content")
                    .prepend("<span class='closeon material-icons'>&#xe5cd;</span>");
                    element.find(".closeon").on("click", function() {
                        $("#calendar").fullCalendar("removeEvents", event._id);
                    });
                },

                eventClick: function(calEvent) {
                    var title = prompt("Change Title:", calEvent.title);
                    calEvent.title = title;
                    $("#calendar").fullCalendar("updateEvent", calEvent);
                }
            });
            calendar.render();
        });
    </script>

我希望你们能帮我解决这个问题。 我不得不说我对 JavaScript 不太了解，我刚刚建立了一个网站，并认为这个日历会是一个非常有用的补充。 谢谢！

Answer 1

我遇到了同样的问题，不知道是什么导致了我的问题。 但是当我在调试控制台上查看时，它显示“[Violation] 'load' 处理程序花费了 166 毫秒”。 我解决了将代码移出方法之外的问题：document.addEventListener('DOMContentLoaded', function() { ..

希望能帮助到你。

Answer 2

尝试这个：

 calendar.refetchEvents(); calendar.render();