JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://arshaw.com/js/fullcalendar-1.5.1/fullcalendar/fullcalendar.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.1/fullcalendar/gcal.js"></script>
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.1/fullcalendar/fullcalendar.css">
<div id='loading' style='display:none'>loading...</div> 
<div id='calendar'></div>

CSS

body {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}

#loading {
    position: absolute;
    top: 5px;
    right: 5px;
}

#calendar {
    width: 900px;
    margin: 0 auto;
}

JavaScript

$(document).ready(function() {

    $('#calendar').fullCalendar({

        // Multiple Sources
                eventSources: [
                   {
                        url: "http://www.google.com/calendar/feeds/en.german%23holiday%40group.v.calendar.google.com/public/basic",
                        className: 'germany',
                        color: 'red'
                    }
        ],
        
        eventClick: function(event) {
            // opens events in a popup window
            window.open(event.url, 'gcalevent', 'width=700,height=600');
            return false;
        },

        loading: function(bool) {
            if (bool) {
                $('#loading').show();
            } else {
                $('#loading').hide();
            }
        }

    });

});