// 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/'} ] }); });
<div id='calendar'></div>
#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; }