fullCalendar

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">
<body>
    <div id="mycalendar"> </div>
</body>

CSS

#mycalendar{
 margin:30px;
 height:600px;
 max-width:500px;
}
#x-fechar {
position: absolute;
right: 0;
padding: 0px 20px 0 0px;
margin: -15px 0 0 0;
cursor: pointer;
}

JavaScript

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

$('#mycalendar').fullCalendar({
                 header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'agendaWeek,agendaDay'
                        },
 			eventRender: function (event, element) {
				        element.popover({
				            title: 'My Title <div id="x-fechar">x</div>',
				            placement:'top',
				            html:true,
				            content: event.msg
                        });
                        $('#x-fechar').click(function(e){
                    if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                        element.popover('hide');
                        });
                      },
                     editable: false,        
              events: [
                        {
                            title  : 'Click me 1',
                            msg: 'I am clipped to the left which is annoying',
                            start  : '2014-09-01 06:00:00',
                            end  : '2014-09-01 08:00:00',
	            			editable: false,                            
                            allDay : false
                        },
                        {
                            title  : 'Click me 2',
                            msg: 'I am OK',                            
                            start  : '2014-09-04 14:00:00',
                            end  : '2014-09-04 15:00:00',
	            			editable: false,                                                        
                            allDay : false 
                        }               
                    ]
            });