JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<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'
	},
    eventMouseover: 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'
            }
        ]
});
});