fullCalendar

by Amitabha Ghosh

HTML

<script src="http://www.hivemindmap.com/js/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://www.hivemindmap.com/css/fullcalendar.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div id="mycalendar"> </div>

CSS

#mycalendar{
 margin:30px;
 height:600px;
 max-width:500px;
}

JavaScript

$.fn.popover.defaults.container = 'body';

$('#mycalendar').fullCalendar(
            {
                defaultView: "agendaWeek",
                slotMinutes:60,
                allDaySlot:false,
                 header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'agendaWeek,agendaDay'
                        },
 			eventRender: function (event, element) {
				        element.popover({
				            title: "My Title",
				            placement:             event.start.getHours()>12?'top':'bottom',
				            html:true,
				            content: event.msg,
                            trigger: 'focus'
                        });
						element.attr('tabindex', -1);
                      },
                     editable: false,        
              events: [
                        {
                            title  : 'Click me 1',
                            msg: 'I am clipped to the left which is annoying',
                            start  : '2011-05-01 06:00:00',
                            end  : '2011-05-01 08:00:00',
	            			editable: false,                            
                            allDay : false
                        },
                        {
                            title  : 'Click me 2',
                            msg: 'I am OK',                            
                            start  : '2011-05-04 14:00:00',
                            end  : '2011-05-04 15:00:00',
	            			editable: false,                                                        
                            allDay : false 
                        },
                        {
                            title  : 'Click me 3',
                            msg: 'I am clipped to the right which is annoying',                            
                            start  : '2011-05-07 12:00:00',
                            end  : '2011-05-07 13:00:00',
	        ...