时间戳

首页 > 解决方案 > 以编程方式更改 fullcalendar 4 的日期

javascript - 以编程方式更改 fullcalendar 4 的日期

问题描述

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

标签： javascriptjqueryfullcalendarfullcalendar-schedulerfullcalendar-4

解决方案

问题是当您在回调中使用名为“日历”的变量时，它不在范围内，这就是它未定义的原因。它的范围仅限于您声明它的“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,
  ...
)};

推荐阅读