Event Calendar Enhancement

events.html

@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="/events.css">
     <link rel="shortcut icon" href="/favicon.ico">
     <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro" rel="stylesheet" type="text/css">
+	  <link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css'>
+  	<link rel="stylesheet" href="/styles/fullcalendar.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NodeSchool - Past and Future Events</title>
   </head>
@@ -49,7 +51,7 @@ <h1 data-i18n="events-header">Past and Future NodeSchool Events</h1><br><br>
         <div class="full">
           <h2 class="big-heading" data-i18n="calendar-h1">Calendar</h2>
           <br><br>
-          <div id="calendar-goes-here"></div>
+          <div id="eventCalendar"></div>
         </div>
       </div>
     </div>
@@ -70,13 +72,16 @@ <h2 class="big-heading" data-i18n="calendar-h1">Calendar</h2>
     </script>
 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
     <script type="text/javascript" src="/js/tabletop.js"></script>
     <script type="text/javascript" src="/js/sheetsee.js"></script>
     <script type="text/javascript" src="/js/table.js"></script>
     <script type="text/javascript" src="/js/main.js"></script>
     <script type="text/javascript" src="/js/events.js"></script>
     <script type="text/javascript" src="/js/dependencies.js"></script>
 
+  	<script type="text/javascript" src="/js/fullcalendar.js"></script>
+    <script type="text/javascript" src="/js/eventCalendar.js"></script>
     <script>
       !function(s,c,h,O,o,l){s.GoogleAnalyticsObject=h;s[h]||(s[h]=function(){
       (s[h].q=s[h].q||[]).push(arguments)});s[h].l=+new Date;o=c.createElement(O);

js/eventCalendar.js

@@ -0,0 +1,87 @@
+var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1swvC909BzbpToZLePM6whDvmXavaxEG6eT257dVf-bY/pubhtml';
+function init() {
+  Tabletop.init( { key: publicSpreadsheetUrl,
+                   callback: parse_events,
+                   simpleSheet: true,
+                   prettyColumnNames : false } )
+}
+
+var events =  [];
+function parse_events(data) {
+  var eventData = data.sort(function(a, b) { return (new Date(a.startdate)) - (new Date(b.startdate)) })
+  eventData.forEach(function (event) {
+    eventObj = appendEvent(event)
+    events.push(eventObj)
+  });
+
+  $(document).ready(function() {
+  // page is now ready, initialize the calendar...
+    $('#eventCalendar').fullCalendar({
+      themeSystem: 'jquery-ui',
+      header:{
+        left:   '',
+        center: 'title',
+        right:  'today prevYear,prev,next,nextYear'
+      },
+      //height: 650,
+      fixedWeekCount: false,
+      eventLimit: true, // allow "more" link when too many events,
+      events: events,
+      eventColor: 'gray',
+      eventClick: function(eventObj) {
+        if (eventObj.url) {
+          window.open(eventObj.url);
+          return false; // prevents browser from following link in current tab.
+        }
+      },
+      eventRender : function(event, element) {
+    	   element[0].title = event.title;
+    	}
+    })
+  });
+}
+
+function appendEvent( event ) {
+
+  // Those 'if statements' fix the invalid event entries so as to avoid problems on calendar
+  if (event.name == "NodeSchool LA" && event.enddate == '2/6/2016'){
+    event.startdate = '2/6/2016'
+  }
+  if (event.name == "JavaScript Meetup" && event.enddate == '7/31/2016'){
+    event.startdate = '7/31/2016'
+  }
+  if (event.name == "NodeSchool San Salvador" && event.startdate == '11/25/2017'){
+    event.enddate = '11/25/2017'
+  }
+  if (event.name == "Saint Petersburg Nodeschool" && event.startdate == '10/29/2017'){
+    event.enddate = '10/29/2017'
+  }
+  if (event.name == "NodeSchool PortHarcourt" && event.startdate == '9/3/2018'){
+    event.startdate = '3/9/2018'
+    event.enddate = '3/10/2018'
+  }
+
+  //Format the day and month. e.g "7/7/2017" need to be "07/07/2017"
+  var endMonth = ("0" + (new Date(event.enddate).getMonth() + 1)).slice(-2)
+  var endDay = ("0" + (new Date(event.enddate).getDate()+1)).slice(-2)
+  var endDate
+  if (event.enddate != ""){
+    endDate = new Date(event.enddate).getFullYear() + '-' + endMonth + '-' + endDay
+  } else {
+    endDate = ""
+  }
+
+  var startMonth = ("0" + (new Date(event.startdate).getMonth() + 1)).slice(-2)
+  var startDay = ("0" + (new Date(event.startdate).getDate())).slice(-2)
+  var startDate = new Date(event.startdate).getFullYear() + '-' + startMonth + '-' + startDay
+
+  var eventObj = {
+    title : event.name,
+    start : startDate,
+    end : endDate,
+    url  : event.website
+  };
+  return eventObj;
+}
+
+window.addEventListener('DOMContentLoaded', init())