Question

我正在使用全日历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

问题在于，当您在回调中使用变量“ calendar”时，该变量不在范围内，这就是未定义变量的原因。它的范围仅限于在其中声明它的“ DOMContentLoaded”回调。

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

如果将所有内容移至单个回调中，则不会出现问题：

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,
  ...
)};

以编程方式更改全日历4的日期

1 个答案: