JSFiddle - React, Tailwind, and code Playground

by Raymond Piller

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/jquery.qtip.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.js"></script>
<body>
    <div id='calendar_wrapper'>
        <div id='calendar'></div>
        <div id='loading'><h1>Loading ...</h1><span class="helper"></span><img alt='loading' src='//proactivedefense.vertigion.com/images/loading.gif' /></div>
    </div>
    <div id='event_list'></div>
</body>

CSS

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

#calendar_wrapper {
    width: 100%;
	margin: 0 auto;
}

#loading {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#loading {
    vertical-align: middle;
    z-index: 10;
    margin: 100px auto;
    opacity: 0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.HideCancel {
	text-decoration: line-through;
}

.IsCanceled {
	text-decoration: line-through;
}

JavaScript

$(document).ready(function(text) {
	$('#calendar').fullCalendar({
		loading: function(bool) {
		  if (bool) 
		    $('#loading').show();
		  else 
		    $('#loading').hide();
		},
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		height: 'auto',
		eventSources: [

	        // your event source
	        {
	        	url: ($(location).attr('host') != 'proactivedefense.vertigion.com' ? (('https:' == $(location).attr('protocol') ? 'https:' : 'http:') +'//proactivedefense.vertigion.com/prd/') : ($(location).attr('pathname').match("^/prd") ? '/prd/' : '/dev/' )) +'schedule.json.php',
			    cache: true,
	            type: 'POST',
	            data: {
	                custom_param1: 'something',
	                custom_param2: 'somethingelse'
	            },
	            error: function() {
	                alert('there was an error while fetching events!');
	            },
	            // color: 'yellow',   // a non-ajax option
	            // textColor: 'black' // a non-ajax option
	        }
	    ],
        eventRender: function(event, element) {
            element.qtip({
                content: {
                    text: (event.img != null ? '<img src="'+ event.img +'" alt="Class Image" style="text-align:center" />' : '') + event.description,
                    title: event.title + '<br /><i>'+ $.format.date(event.StartDateTime, "MMM d h:mm p") +' - '+ ($.format.date(event.StartDateTime, "MMddyyyy") == $.format.date(event.EndDateTime, "MMddyyyy") ? $.format.date(event.EndDateTime, "h:mm p") : $.format.date(event.EndDateTime, "MMM d h:mm p") ) +'</i>'
                },
            });
        }   
	})
});