引用日历对象

Question

我需要引用一个完整日历对象 – 以在初始化后更改内容或选项 – 但我总是收到错误消息。

我首先尝试了 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 中初始化主日历对象，并在该页面中将其用作全局对象，如下面的代码所示：

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

日历对象的初始化在this link中提供。

引用日历对象

Reference to a calendar object

javascript

fullcalendar

fullcalendar-4