JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">
<div id="calendar"></div>
JavaScript
$(document).ready(function() {
var $calPopOver;
$('#calendar').fullCalendar({
defaultDate: '2015-08-23',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventClick: function(date, allDay, jsEvent, view) {
$(this).children().popover({
title: '<p>Lorem ipsum dolor sit amet</p>',
placement: 'right',
content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
html: true,
container: 'body'
});
if ($calPopOver) $calPopOver.popover('destroy');
$calPopOver = $(this).children().popover('show');
},
eventLimit: false, // allow "more" link when too many events
events: [{
title: 'All Day Event',
start: '2015-08-04'
}, {
title: 'Long Event',
start: '2015-08-18',
end: '2014-08-19'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-08-23'
}]
});
});