JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://drcraigjohnson.net/jquery-ui-1.8.21.custom/css/dark-hive/jquery-ui-1.8.21.custom.css">
<script src="http://drcraigjohnson.net/fullcalendar-1.5.3/fullcalendar/gcal.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
JavaScript
$(document).ready(function() {
$('#calendar').fullCalendar({
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'AIzaSyCwtUcj7zMGkKA9C_612Ftl6PWlfN9O3zg',
// US Holidays
events: {
googleCalendarId: 'en.usa#[email protected]'
},
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});