通过编程方式更改FullCalendar 4的日期

Question

我正在使用fullcalendar v4。我有一个迷你日历，一旦单击事件，我希望另一个更大的日历(calendar_full(到达该日期。

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var calendar1 = document.getElementById('calendar_mini');
    var calendar_mini = new FullCalendar.Calendar(calendar1, {
        plugins: ['interaction', 'dayGrid'],
        eventClick: function(info) {
            //when clicking on events, go to date on main calendar
            calendar.gotoDate(info.event.start)

        }
 ...
});
document.addEventListener('DOMContentLoaded', function() {
    var calendar_full = document.getElementById('calendar_full');
    var calendar = new FullCalendar.Calendar(calendar_full, {
         plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
         header: {
            right: 'prevYear,prev,next,nextYear,today',
            left: 'title',
            center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
            },
           selectMirror: true,
 ...
)};

在" calendar_mini代码"中，calendar.gotodate(info.event.start(的EventClick函数不会更改主要日历。我有错误：

Uncaught ReferenceError: calendar is not defined

Answer 1

问题是，当您在回调中使用它时，称为"日历"的变量不在范围中，这就是为什么它不确定的原因。它的范围仅限于您声明的" domcontentloade"回调。

现在，您不需要两个单独的" domcontentload"回调。通常，对于加载页面后需要运行的所有代码就足够了。

如果您将所有内容移动到一个回调中，则不会有问题：

document.addEventListener('DOMContentLoaded', function() {
  var calendar1 = document.getElementById('calendar_mini');
  var calendar_mini = new FullCalendar.Calendar(calendar1, {
    plugins: ['interaction', 'dayGrid'],
    eventClick: function(info) {
        //when clicking on events, go to date on main calendar
        calendar.gotoDate(info.event.start)
    }
  var calendar_full = document.getElementById('calendar_full');
  var calendar = new FullCalendar.Calendar(calendar_full, {
     plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
     header: {
        right: 'prevYear,prev,next,nextYear,today',
        left: 'title',
        center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
        },
       selectMirror: true,
  ...
)};