FullCalendar mini-mode

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

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css">
<h2>Mini FullCalendar</h2>
<br>

<div id='calendar'></div>

CSS

.hello { background-color:blue !important }

#calendar {
    width: 200px;
    margin: 0 auto;
    font-size: 10px;
}
.fc-header-title h2 {
    font-size: .9em;
    white-space: normal !important;
}
.fc-view-month .fc-event, .fc-view-agendaWeek .fc-event {
    font-size: 0;
    overflow: hidden;
    height: 2px;
}
.fc-view-agendaWeek .fc-event-vert {
    font-size: 0;
    overflow: hidden;
    width: 2px !important;
}
.fc-agenda-axis {
    width: 20px !important;
    font-size: .7em;
}

.fc-button-content {
    padding: 0;
}



/* misc demo css */
h2 { text-align: center; }
.buttons { display: block; margin: 0 auto; text-align: center; }
.buttons button { margin-bottom: 5px; }

JavaScript

// FullCalendar v1.5
// Script modified from the "theme.html" demo file
$(document).ready(function() {

    $('#calendar').fullCalendar({
        theme: true,

        dayRender: function ( date, cell ) {
            console.log(cell);
            cell.css('background-color', 'blue');
        },

        header: {
            left: 'prev,next today',
            center: 'title',
            
        },

        defaultView: 'month',
        editable: true,

        // add event name to title attribute on mouseover
        eventMouseover: function(event, jsEvent, view) {
            if (view.name !== 'agendaDay') {
                $(jsEvent.target).attr('title', event.title);
            }
        }

    
    });

});
console.log('good');