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();