TL; DR
Cannon has published a modified FullCalendar , which allows the calendar to span more than one month, however it seems to work all months, and is associated with an earlier version of FullCalendar.
Here I take 3 separate calendars that hide the navigation on two calendars and synchronize the months in the main calendar: jsFiddle
More details
Set up 3 calendars - in my case, the main calendar with smaller "look back / look forward" calendars in 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>
There is a calendar initialization function with the option hides navigation:
function initCalendar($calendarDiv, displayDate, isMain) { $calendarDiv.fullCalendar({ defaultDate: displayDate, header: { left: 'title', center: '', right: isMain ? 'today prev,next' : '' }, events: ... eventdata callbacks etc }); }
In $(document).ready set the start date of the three calendars today, but exactly 1 month apart, hiding navigation on two secondary calendars. Then connect additional event handlers to the buttons "main" calendar next and prev , which synchronize 3 calendars:
$(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 }); }