FullCalendar: popovers

Display a popover when event is clicked or selected

by Sylvain

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.0/fullcalendar.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.0/fullcalendar.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id='calendar'></div>
<div id="popoverContent" class="hide">This <em>rich</em>  <pre>html</pre> content goes inside popover</div>

CSS

body {
    margin-top: 40px;
    text-align: center;
    font-size: 13px;
    font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar {
    width: 900px;
    margin: 0 auto;
}

JavaScript

var popTemplate = [
    '<div class="popover" style="max-width:600px;" >',
    '<div class="arrow"></div>',
    '<div class="popover-header">',
    '<button id="closepopover" type="button" class="close" aria-hidden="true">&times;</button>',
    '<h3 class="popover-title"></h3>',
    '</div>',
    '<div class="popover-content"></div>',
    '</div>'].join('');

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();


$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    selectable: true,
    selectHelper: true,
    editable: true,
    events: [{
        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
    }, ],

    select: function (start, end, jsEvent) {
        closePopovers();
        popoverElement = $(jsEvent.target);
        $(jsEvent.target).popover({
            title: 'the title',
            content: function () {
                return $("#popoverContent").html();
            },
            template: popTemplate,
            placement: 'left',
            html: 'true',
            trigger: 'click',
            animation: 'true',
            container: 'body'
        }).popover('show');
    },

    eventClick: function (calEvent, jsEvent, view) {
        //closePopovers();
        popoverElement = $(jsEvent.currentTarget);
    },

    eventRender: function (event, element) {
        element.popover({
            title: 'the title',
            content: function () {
                return $("#popoverContent").html();
            },
            template: popTemplate,
          ...