Is it possible to display two/three months?

问题

回答1:

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.

回答2:

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



});

回答3:

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

回答4:

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

回答5:

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

回答6:

Add to first, second and third months this:

defaultDate:'2016-07-01',

来源：https://stackoverflow.com/questions/3392150/is-it-possible-to-display-two-three-months

标签

jquery-plugins

fullcalendar