<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../calendar/fullcalendar.min.css' rel='stylesheet' />
<link href='../calendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../calendar/lib/moment.min.js'></script>
<script src='../calendar/lib/jquery.min.js'></script>
<script src='../calendar/fullcalendar.min.js'></script>
<script src="../calendar/gcal.min.js"></script>
<script>

	$(document).ready(function() {
	
		$('#calendar').fullCalendar({

			header: {
				left: 'prev,next today',
				right: 'listYear,month'
			},
			defaultView: 'listYear',
			height: $(window).height()*0.95,
			validRange: function(nowDate) {
				return {
					start: nowDate.clone().subtract(1, 'days'),
					end: nowDate.clone().add(12, 'months')
				};
			},

			displayEventTime: true, // don't show the time column in list view

			// 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: '',
		
			// US Holidays
			events: 'ifv3l6ee56rst8pq3dmtsgnf0s@group.calendar.google.com',
			
			eventClick: function(event) {
				// opens events in a popup window
				window.open(event.url, 'gcalevent', 'width=1000,height=800');
				return false;
			},
			
			loading: function(bool) {
				$('#loading').toggle(bool);
			}
			
		});
		
	});

</script>
<style>
	#calendar {height: calc(100vh - 20px);}
	body {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: subpixel-antialiased;
  font-size: 14px;
  font-weight: 300;
  font-family: "Poppins", Helvetica, Arial, sans-serif;}
  @media (min-width: 568px) {
    body {
      font-size: 16px; } }
  @media (min-width: 1000px) {
    body {
      font-size: 18px; } }
</style>
</head>
<body>

<div id='loading' style="display: none;	position: absolute;	top: 10px; right: 10px;">loading...</div>
<div id='calendar'></div>

</body>
</html>
