将“完整日历”与另一个“完整日历”同一页面同步

Question

使用FullCalendar，我可以在同一页面上显示2个日历。 Calendar1具有从日，周，月，年切换视图的所有控件以及前进/后退的箭头。 日历 2 是一个不显示控件的列表月份。 它在加载时工作正常，但我希望当 Calendar1 每月或每年发生变化时它会发生变化。

这可能吗？ 我还没有找到任何允许我在日历1上的月份/年份更改时更改列表月份的东西。

jQuery(document).ready(function () {
$('#calendar1').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaWeek,month,listYear'
    },
    views: {
        listYear: { buttonText: 'Year'}
    },
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectHelper: true,
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    events: "CalendarData.ashx",
    eventColor: '#038ddd'
});
$('#calendar2').fullCalendar({
    header: {
        left: '',
        center: '',
        right: ''
    },
    views: {
        listMonth: { buttonText: 'Month' }
    },
    defaultView: 'listMonth',
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectHelper: true,
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    events: "CalendarData.ashx",
    eventColor: '#038ddd'
});
});

Answer 1

我最近需要实现它来同步网格和列表视图。 我遇到了这个问题，但建议的评论似乎不再有效。 这是我使用的一个简单解决方案。

这是两个日历的简单 html 容器。

<div>
    <div id="calendarGrid"></div>
    <div id="calendarList"></div>
</div>

下面是挂接到"datesSet"方法的javascript代码，该方法在用户浏览日历时触发，并为"其他"日历设置日期以使其保持同步，包括日期比较以防止无限循环。

var calendarElGrid = document.getElementById('calendarGrid');
var calendarElList = document.getElementById('calendarList');
var calendarGrid = new FullCalendar.Calendar(calendarElGrid, {
    initialView: 'dayGridMonth',
    datesSet: function (info) {
        syncCalendar(calendarList, info.start);
    }
});
calendarGrid.render();
var calendarList = new FullCalendar.Calendar(calendarElList, {
    initialView: 'listMonth',
    datesSet: function (info) {
        syncCalendar(calendarGrid, info.start);
    }
});
calendarList.render();
function syncCalendar(otherCalendar, startDate) {
    if (otherCalendar.getDate().toDateString() != startDate.toDateString()) {
        otherCalendar.gotoDate(startDate);
    }
}

解决方案基于此处的 v6.0.2 文档：https://fullcalendar.io/docs/datesSet