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

我遇到了同样的问题，不确定是什么原因导致我的问题。但是，当我检查调试控制台时，它显示了" [违规]'负载'处理程序166毫秒。我解决了将代码移出外部方法的问题：document.addeventlistener('domcontentloaded'，function(({..

希望它有帮助。

Answer 2

尝试以下：

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