FullCalendar mini-mode

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

by sheshu036

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

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

<br><br>
<div class="buttons">
    <button class="vebookmarklet">Visual Event</button> (press esc to cancel)
    <br>
    <button class="layers">Visual Event + Layers Script</button> (use arrows keys to cycle)
</div>

CSS

#calendar {
    width: 400px;
    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; }

@media only screen and (max-width: 500px) {
  #calendar {
    width: 200px;
    margin: 0 auto;
    font-size: 10px;
}}
}

JavaScript

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

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        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);
            }
        },

        // For DEMO only
        // *************
        events: [
            {
            title: 'All Day Event',
            start: new Date(y, m, 1)},
        {
            title: 'Long Event',
            start: new Date(y, m, d - 5),
            end: new Date(y, m, d - 2)},
        {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d - 3, 16, 0),
            allDay: false},
        {
            id: 999,
            title: 'Repeating Event',
            start: new Date(y, m, d + 4, 16, 0),
            allDay: false},
        {
            title: 'Meeting',
            start: new Date(y, m, d, 10, 30),
            allDay: false},
        {
            title: 'Lunch',
            start: new Date(y, m, d, 12, 0),
            end: new Date(y, m, d, 14, 0),
            allDay: false},
        {
            title: 'Birthday Party',
            start: new Date(y, m, d + 1, 19, 0),
            end: new Date(y, m, d + 1, 22, 30),
            allDay: false},
        {
            title: 'Click for Google',
            start: new Date(y, m, 28),
            end: new Date(y, m, 29),
            url: 'http://google.com/'}
        ]
    });


    // Visual Event
    // http://www.sprymedia.co.uk/article/Visual+Event
   ...