FullCalendar mini-mode

Make a mini FullCalendar using CSS and an "eventMouseover" callback.

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.css">
<script src="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<h2>Mini FullCalendar</h2>
<div id="calendar"></div>

JavaScript

function onExternalEventDrop(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
    if (!allDay && draggedEventAllDay) {
        revertFunc();
    }
}

var draggedEventAllDay = false;
$('#calendar').fullCalendar({
    header: {
        left: 'month,agendaWeek,agendaDay',
        center: 'title',
        right: 'prev,next '
    },
    columnFormat: {
        month: 'dddd'
    },
    editable: true,
    defaultView: 'agendaWeek',
    events: [
        {
        title: 'allday_event',
        start: "2012-07-04",
        end: "2012-07-05",
        id: 4,
        color: "#006633",
        editable: true,
        allDay: true},
    {
        title: 'normal_event',
        start: "2012-07-05T12:00:00-00:00",
        end: "2012-07-05T13:00:00-00:00",
        id: 5,
        color: "#006633",
        editable: true,
        allDay: false}
    ],
    eventDragStart: function(event, jsEvent, ui, view) {
        draggedEventAllDay = event.allDay;
    },
    eventDrop: onExternalEventDrop
});