SO-11427066

Demo for http://stackoverflow.com/questions/11427066 showing three months using FullCalendar v2.0.2 release

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.2/fullcalendar.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.2/fullcalendar.js"></script>
<!-- Demo for http://stackoverflow.com/questions/11427066 -->
<!-- showing two months using FullCalendar v2.0.2 release -->
<div id='calendar2'></div>
<br>
<div id='calendar0'></div>
<br>
<div id='calendar1'></div>

CSS

body {
    margin-top: 20px;
    font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar0 {
    width: 500px;
    font-size: 10px;
    margin: 0 auto;
}
#calendar1,
#calendar2{
    width: 500px;
    font-size: 10px;
    margin: 0 auto;
}

.ac_checked_date{
   background-color:lightblue;
}
}

JavaScript

$(document).ready(function () {

    var all_events = [{
        title: 'Event cross Jul/Aug',
        start: '2014-07-21',
        end: '2014-08-02'
    }, {
        title: 'Event cross Aug/Sep',
        start: '2014-08-21',
        end: '2014-09-02'
    }, {
        title: 'All Day 09 Event',
        start: '2014-09-04',
        city: 'Yekaterinburg'
    }, {
        title: 'All Day Event',
        start: '2014-08-01'
    }, {
        title: 'Long Event',
        start: '2014-08-21',
        end: '2014-08-24'
    }, {
        id: 999,
        title: 'Repeating Event',
        start: '2014-08-23'
    }, {
        id: 999,
        title: 'Repeating Event',
        start: '2014-08-25'
    }, {
        title: 'Meeting',
        start: '2014-08-26'
    }, {
        title: 'Lunch',
        start: '2014-08-26'
    }, {
        title: 'Birthday Party',
        start: '2014-08-27'
    }, {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2014-08-28'
    }, {
        title: 'Birthday Party',
        start: '2014-10-06'
    }, {
        title: 'Birthday Party2',
        start: '2014-10-04',
        end: '2014-10-08'
    }];

    var cal0 = $('#calendar0');
    var cal1 = $('#calendar1');
    var cal2 = $('#calendar2');

    cal0.fullCalendar({
        header: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        events: all_events,
        viewRender: function (view, element) {
            cur = view.intervalStart;
            nextMonth = moment(cur).add(1, 'months');
            cal1.fullCalendar('gotoDate', nextMonth);
            prevMonth = moment(cur).subtract(1, 'months');
            cal2.fullCalendar('gotoDate', prevMonth);
        },
        dayClick: function(date, jsEvent, view) {
            getEvents(date);
            // change the day's background color just for fun
            $(this).addClass('ac_checked_date');
           ...