Is it possible to display two/three months?

2023-01-10 10:43 问答作者：

Is it possible to display two/t开发者_运维知识库hree months?

Even I wanted the same and did something like this.

<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>

and in 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');
    });



});

TL;DR
Cannon has posted a modified FullCalendar which allows a calendar to span across more than one month, however this seems to run all the months into eachother, and is bound to an earlier version of FullCalendar.

Here's my take on 3 separate calendars, which hides the navigation on two calendars and synchronizes the months on the main calendar: jsFiddle

Details

Set up the 3 calendars - in my case the main calendar with smaller 'look behind / look ahead' calendars to the next and previous months:

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

DRY up the calendar initialization with a function with optionally hides the navigation:

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

In the $(document).ready, set the initial date of the 3 calendars around today, but exactly 1 month apart, hiding the navigation on the two secondary calendars. Then wire additional event handlers on the 'main' calendar's next and prev buttons which keep the 3 calendars in synch:

$(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
    });
}

The documentation for FullCalendar should help you answer that (which is well documented, BTW). I found this doing a quick search for your answer.

EDIT: digging a tad further, I found this as well which indidcates it's not a primary feature but there are some things you can do to mimic what you want.

@ John Smith -- I've created 3 calendars and so far it seems to be working for me but instead of dragging events, mines are just simply saving events title, start, end with the ability to edit them.

One alternative can be, show the required no of weeks in basicWeek view. It renders as a tab showing 2 Months.

$('#calendar').fullCalendar({

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

With the team I work in, we came up with this solution (for Vue.js, but it can by applied to any version). You can have in a single calendar many months and they are differentiated from each other by the name of the month in the first day of it and by the background color. It works pretty well and, in contrast with the solution of having multiple instances of the calendar, here you can drag and drop events from one month to the other and create events that start in one month and end in the other.