CODEWITHSUNDEEP
jquery-pluginsfullcalendar
John Smith
John Smith

Reputation: 53

Is it possible to display two/three months?

Is it possible to display two/three months?

Upvotes: 5

Views: 11643

Answers (7)

miltonlaufer
miltonlaufer

Reputation: 305

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.

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

It looks like this: enter image description here

Upvotes: 0

Dhanalal Bhardwaj
Dhanalal Bhardwaj

Reputation: 161

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

Upvotes: 0

KP SERVER
KP SERVER

Reputation: 1

Add to first, second and third months this: 

defaultDate:'2016-07-01',

Upvotes: -2

StuartLC
StuartLC

Reputation: 107407

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

Upvotes: 2

Geervani
Geervani

Reputation: 96

Even I wanted the same and did something like this.

<table width="100%" cellpadding="5" cellspacing="5"> <tr> <td> &nbsp; </td> <td> <input type="button" id="myprevbutton" value="&nbsp;&#9668;&nbsp;" />&nbsp; <input type="button" id="mynextbutton" value="&nbsp;&#9658;&nbsp;" />&nbsp; </td> <td> &nbsp; </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');
    });



});

Upvotes: 3

hersh
hersh

Reputation: 1183

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

Upvotes: 0

rickp
rickp

Reputation: 854

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.

Upvotes: 1

Related Questions