可以显示两三个月吗？答案

【问题标题】：Is it possible to display two/three months?可以显示两三个月吗？
【发布时间】：2019-12-14 02:01:21
【问题描述】：

可以显示两三个月吗？

【问题讨论】：

【解决方案1】：

即使我也想要同样的东西并做了这样的事情。

<table width="100%" cellpadding="5" cellspacing="5"> <tr> <td>   </td> <td> <input type="button" id="myprevbutton" value=" ◄ " />  <input type="button" id="mynextbutton" value=" ► " />  </td> <td>   </td> </tr> <tr> <td width="33%"> <div id='calendar0'> </div> </td> <td width="33%"> <div id='calendar1'> </div> </td> <td width="33%"> <div id='calendar2'> </div> </td> </tr> </table>

在 JS 中

$(document).ready(function() {

    var date = new Date();

    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar0').fullCalendar({
    header: {
            left: '',
            center: 'title',
            right: ''
        },
    month:m-1,
    theme: true,
    });
    $('#calendar2').fullCalendar({
    header: {
            left: '',
            center: 'title',
            right: ''
        },
    month:m+1,
    theme: true,
    });
    $('#calendar1').fullCalendar({
        header: {
            left: '',
            center: 'title',
            right: ''
        }, 
    theme: true,
    editable: false,
    });

    $('#myprevbutton').click(function() {
        $('#calendar0').fullCalendar('prev');
        $('#calendar1').fullCalendar('prev');
        $('#calendar2').fullCalendar('prev');
    });
    $('#mynextbutton').click(function() {
        $('#calendar0').fullCalendar('next');
        $('#calendar1').fullCalendar('next');
        $('#calendar2').fullCalendar('next');
    });



});

【讨论】：

【解决方案2】：

TL;DR
Cannon has posted a modified FullCalendar 允许日历跨越一个多月，但是这似乎将所有月份都运行到彼此中，并且绑定到早期版本完整日历。

这是我对 3 个独立日历的看法，它隐藏了两个日历上的导航并同步主日历上的月份：jsFiddle

详情

设置 3 个日历 - 在我的情况下，主日历具有较小的“向后看/向前看”日历到下个月和上个月：

<div id='calendarPrev' style='width:50%'></div>
<div id='calendarCurrent'  style='width:100%'></div>
<div id='calendarNext' style='width:50%'></div>

用一个可选隐藏导航的函数来干掉日历初始化：

function initCalendar($calendarDiv, displayDate, isMain) {
    $calendarDiv.fullCalendar({
        defaultDate: displayDate,
        header: {
            left: 'title',
            center: '',
            right: isMain 
                ? 'today prev,next' 
                : ''
        },
        events: ... eventdata callbacks etc
    });
}

在$(document).ready 中，将三个日历的初始日期设置为今天左右，但正好相隔 1 个月，隐藏两个辅助日历上的导航。然后在“主”日历的 next 和 prev 按钮上连接其他事件处理程序，以保持 3 个日历同步：

$(document).ready(function() {
    initCalendar($('#calendarCurrent'), moment(), true);
    initCalendar($('#calendarPrev'), moment().subtract(1, 'months'), false);
    initCalendar($('#calendarNext'), moment().add(1, 'months'), false);

    $('body').on('click', 'button.fc-prev-button', function() {
        $('#calendarPrev').fullCalendar('prev');
        $('#calendarNext').fullCalendar('prev');
        // allow main calendar event to propogate
    });

    $('body').on('click', 'button.fc-next-button', function() {
        $('#calendarPrev').fullCalendar('next');
        $('#calendarNext').fullCalendar('next');
        // allow main calendar event to propogate
    });
}

【讨论】：

【解决方案3】：

FullCalendar 的文档应该可以帮助您回答这个问题（顺便说一句，文档有据可查）。我发现 this 正在快速搜索您的答案。

编辑：进一步挖掘，我发现this 也表明它不是主要功能，但您可以做一些事情来模仿您想要的。

【讨论】：

提前致谢。这个问题 199 建议我创建 3 个日历，但我不确定如果我将事件从 Month1(calendar1) 拖到 Month3(calendar3) 是否会起作用。我会检查一下。还是谢谢。
我非常有信心（没有使用过它）你不能这样做，除非你有冒险精神并且想要修改库来做到这一点。也不要忘记接受答案:)。

【解决方案4】：

@ John Smith -- 我已经创建了 3 个日历，到目前为止它似乎对我有用，但不是拖动事件，我只是简单地保存事件标题、开始和结束，并具有编辑它们的能力。

【讨论】：

【解决方案5】：

另一种选择是在 basicWeek 视图中显示所需的周数。它呈现为显示 2 个月的选项卡。

$('#calendar').fullCalendar({

    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    views: {
        basicWeek: {
            type: 'basic',
            duration: {weeks: 8},
            rows: 8
        }
    }
}

【讨论】：

【解决方案6】：

与我所在的团队一起，我们提出了这个解决方案（适用于 Vue.js，但它可以应用于任何版本）。您可以在一个日历中拥有多个月份，它们通过月份的第一天的月份名称和背景颜色相互区分。它工作得很好，与拥有多个日历实例的解决方案相比，在这里您可以将事件从一个月拖放到另一个月，并创建在一个月开始并在另一个月结束的事件。

https://github.com/fullcalendar/fullcalendar/issues/470#issuecomment-565542643

看起来像这样：

【讨论】：

【解决方案7】：

在第一个月、第二个月和第三个月加上这个：

defaultDate:'2016-07-01',

【讨论】：

请解释这将如何帮助