javascript - 引用日历对象

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

标签： javascriptfullcalendarfullcalendar-4

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

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