FullCalendar quick start

I was pleasantly surprised at how painlessly Adam Shaw’s FullCalendar worked in a Visualforce page so am posting a basic controller and page here to help others get started. This is the output they produce (with of course all the hard work done by FullCalendar):

The controller emits hard-coded data: a real controller would build the data from various SObjects and provide actions to be invoked from the client-side JavaScript:

public with sharing class CalendarDemoController {
    public String events {
        get {
            JSONGenerator g = JSON.createGenerator(true);
            g.writeStartArray();
            for (Integer i = -2; i <= 2; i++) {
                g.writeStartObject();
                g.writeStringField('title', 'Event ' + i);
                g.writeDateTimeField('start', DateTime.now().addDays(i).addHours(i));
                g.writeDateTimeField('end', DateTime.now().addDays(i).addHours(i + 1));
                g.writeEndObject();
            }
            g.writeEndArray();
            return g.getAsString();
        }
    }
}

The fullcalendar-1.5.4.zip download is setup as a single static resource with the various pieces of content accessed via their paths in the Visualforce page. The calendar is rendered using a mixture of static configuration and the events JSON string provided by the controller:

<apex:page controller="CalendarDemoController" tabStyle="Contact">

<link href="{!URLFOR($Resource.fullcalendar,'fullcalendar-1.5.4/fullcalendar/fullcalendar.css')}" rel="stylesheet" type="text/css"/>
<link href="{!URLFOR($Resource.fullcalendar,'fullcalendar-1.5.4/fullcalendar/fullcalendar.print.css')}" rel="stylesheet" type="text/css" media="print"/>
<script src="{!URLFOR($Resource.fullcalendar, 'fullcalendar-1.5.4/jquery/jquery-1.8.1.min.js')}" type="text/javascript" language="javascript"></script>
<script src="{!URLFOR($Resource.fullcalendar, 'fullcalendar-1.5.4/fullcalendar/fullcalendar.min.js')}" type="text/javascript" language="javascript"></script>

<apex:sectionHeader title="Calendar Demo"/>

<!-- Calendar is rendered here by the fullcalendar Javascript -->
<apex:pageBlock >
    <div id='calendar'/>
</apex:pageBlock>

<!-- Fullcalendar configuration plus event data supplied by controller -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'title',
            center: 'month,agendaWeek,agendaDay',
            right: 'prevYear prev,today,next nextYear'
        },
        defaultView: 'agendaWeek',
        allDayDefault: false,
        minTime: 8,
        maxTime: 21,
        events:
{!events}
    });
});
</script>
</apex:page>