Tiny version of fullcalendar [closed]

Question

I am hoping someone can tell me how to get a very small version of FullCalendar (or something similar) that will do a widget size calendar without titles, just colored blocks for dates with events that can be clicked on. I am using fullcalendar in a wordpress site which is great, but all the google calendar widgets out there really suck!

Answer 1

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 a demo.

The CSS

#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; } 

Javascript

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

---

Updated: Made week view horizontal events smaller and made all events 2px wide or high to make it easier to hover over them.

---

Update v2.4+ Instead of updating the above answer, I'll just post the modified code I used to make FullCalendar v2.4 tiny (demo)

CSS

#calendar {     width: 200px;     margin: 0 auto;     font-size: 10px; } .fc-toolbar {     font-size: .9em; } .fc-toolbar h2 {     font-size: 12px;     white-space: normal !important; } /* click +2 more for popup */ .fc-more-cell a {     display: block;     width: 85%;     margin: 1px auto 0 auto;     border-radius: 3px;     background: grey;     color: transparent;     overflow: hidden;     height: 4px; } .fc-more-popover {     width: 100px; } .fc-view-month .fc-event, .fc-view-agendaWeek .fc-event, .fc-content {     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; } 

Javascript

$(document).ready(function () {      $('#calendar').fullCalendar({         header: {             left: 'prev,next today',             center: 'title',             right: 'month,agendaWeek,agendaDay'         },          eventAfterRender: function () {             // add titles to "+# more links"             $('.fc-more-cell a').each(function () {                 this.title = this.textContent;             });         },          // add event name to title attribute on mouseover         eventMouseover: function (event, jsEvent, view) {             if (view.name !== 'agendaDay') {                 $(jsEvent.target).attr('title', event.title);             }         },          editable: true,         eventLimit: true // allow "more" link when too many events      });  });