Saturday, April 23, 2011

FullCalendar mini-sized

I've always liked Adam Shaw's FullCalendar plugin and while I was trolling Stackoverflow I found a question about how one would make a tiny version of the calendar. Gears started grinding and I figured that it could be done with just some basic CSS. YAY!!

This is from the answer I posted on Stackoverflow:
You can make a fully functional tiny version by adding a bit of CSS. I had to add a "eventMouseover" callback to add the event name to the title attribute, so you can see it's name in the tooltip.

Here is a screen shot of the mini-sized calendar (200 x 225)


And jsFiddle for a demo:



So, just in case something happens to Stackoverflow and/or jsFiddle, here is the CSS and javascript that was used:
#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;
}
$(document).ready(function() {

    $('#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);
            }
        }
    });

});

2 comments:

  1. I am happy to find your mini-sized fullcalendar. But I don't know where I have to copy Javascript code. In what file? There many Javascript files in FullCalendar.
    Thank you in advance for your response.

    AC

    ReplyDelete
    Replies
    1. Hi AC!

      The css can just be added to your custom css stylesheet. And if you are already initializing the FullCalendar code somewhere on your page or in an external script, all you need to do is copy the code from the "eventMouseover" option into your script. It really shouldn't be added into the FullCalendar script/css files in case you update the plugin in the future, but into your own ".js" and/or ".css" files.

      Delete