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

CSS

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

JavaScript

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

$('#mycalendar').fullCalendar(
            {
                defaultView: "month",
                slotMinutes:60,
                allDaySlot:false,
                 header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'agendaWeek,agendaDay'
                        },
 			eventRender: function (event, element) {
				        element.popover({
				            title: "My Title",
                    placement: 'bottom',
                    html: true,
                    animation: true,
                    content: event.msg,
                    trigger: "manual"
                        }).on("mouseenter", function () {
                            var _this = this;
                            $(this).popover("show");
                            $(".popover").on("mouseleave", function () {
                                $(_this).popover('hide');
                            });
                        }).on("mouseleave", function () {
                            var _this = this;
                            setTimeout(function () {
                                if (!$(".popover:hover").length) {
                                    $(_this).popover("hide");
                                }
                            }, 300);
                        });
                      },
                     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',
                           ...