对日历对象的引用

Question

我需要引用一个 fullcalendar 对象 - 在初始化后更改内容或选项 - ，但我总是收到错误消息。我首先尝试了 javascript 初始化，然后是 jQuery 版本。我试过“calendar.refech()”和“calendar.fullcalendar.refetch()”和“$.(#calendar)('refetchEvents')”document.addEventListener('DOMContentLoaded', function() {    var calendarEl = document.getElementById('calendar');    $(function() {        $('#calendar').fullCalendar({            plugins:                 [ 'interaction', 'dayGrid', 'timeGrid' ,'list'],            header: {                left: 'prev,next today',                center: 'title',                right: 'dayGridMonth,timeGridWeek,timeGridDay'            },            locale: 'de',            defaultDate: heute,            {…}            editable: true,            eventLimit: true,            events: 'load.php',        })    });});$('#calendar').getOption('locale');代码中的最后一行产生错误：“Uncaught TypeError: $(...) is not a function

Answer 1

如您的代码所述， calendarEl 已初始化但从未使用过。

基本上，您可以从 eventListener DOMContentLoaded 初始化主 Calendar 对象，并将其用作该页面中的全局对象，如下面的代码：

var myCalendar;

document.addEventListener('DOMContentLoaded', function() {

    var calendarEl = document.getElementById('calendar');

    var myCalendar = new FullCalendar.Calendar(calendarEl, {

          plugins: 

                [ 'interaction', 'dayGrid', 'timeGrid' ,'list'],

            header: {

                left: 'prev,next today',

                center: 'title',

                right: 'dayGridMonth,timeGridWeek,timeGridDay'

            },

            locale: 'de',

            defaultDate: heute,

            {…}

            editable: true,

            eventLimit: true,

            events: 'load.php'

    });

    myCalendar.render();

});

此链接中提供了 Calendar 对象的初始化。