A custom table panel for Panic's Status Board that can tabulate a Google Calendar feed.

statusboard_panel_gcal

<!-- 5by5 Live Show Panel for Status Board -->
<!-- Written by Jordan Merrick - https://www.jordanmerrick.com -->
<!-- JS based upon Google Calendar API -->
<!-- GOOGLE HAS SINCE DEPRECATED GOOGLE CALENDAR API v1 & v2, RENDERING THIS SCRIPT UNUSABLE -->
<!-- You are welcome to adapt it but it will no longer function -->
<title>5by5 Panel</title>
<script>
 
// Set the date range start for Google Calendar parsing since we only want the schedule for the next 30 days

var myDate = new Date();

var myYear = myDate.getFullYear();
var myMonth = ("0" + (myDate.getMonth() + 1)).slice(-2);
var myDay = ("0" + myDate.getDate()).slice(-2);
var startDate = [];
startDate.push(myYear + '-' + myMonth + '-' + myDay);

// Set the date range end for 30 days

var endDate = new Date();
endDate.setDate(endDate.getDate()+30);
var endYear = endDate.getFullYear();
var endMonth = ("0" + (endDate.getMonth() + 1)).slice(-2);
var endDay = ("0" + endDate.getDate()).slice(-2);
var maxDate = [];
maxDate.push(endYear + '-' + endMonth + '-' + endDay);

</script>
<table id="table">

<script>
  function schedule(root) {
    var feed = root.feed;
    var entries = feed.entry || [];
    var html = [];
    for (var i = 0; i < entries.length; ++i) {
      var entry = entries[i];
      var title = (entry.title.type == 'html') ? entry.title.$t : escape(entry.title.$t);
      var start = (entry['gd$when']) ? entry['gd$when'][0].startTime : "";
      // Format date into a more readable format than what Google spits out
    var showdate =  new Date(start);
    var showday = showdate.getDate();
      var showmonth = showdate.getMonth() + 1;
	  // Trim everything beyond the 24h formatted time (such as seconds and timezone info)
	  var showtime = showdate.toTimeString().substring(0,5);
	  // Add a table row for each show along with date and time, split into separate columns	
	  html.push('<tr><td class="projectName">', unescape(title), '</td><td class="projectVersion">', showmonth, '/', showday, '</td><td class="projectVersion">', showtime, '</td></tr>');
    }
	// Add the array to the table that's created, joining the array together as a single HTML string
    document.getElementById("table").innerHTML = html.join("");
  }

</script>
<!-- This is the main feed to use from 5by5, along with a bunch of queries to remove non-essential info and sort the data accordingly, then outputting it as JSON for our script to work and then display as a panel -->
	<script>
	document.write('<script src="https://www.google.com/calendar/feeds/fivebyfivestudios%40gmail.com/public/full?fields=link,entry(title,gd:when)&alt=json-in-script&orderby=starttime&singleevents=true&start-min=' + startDate + '&start-max=' + maxDate + '&sortorder=ascending&callback=schedule"><\/script>');
	</script>
</table>

<!-- End Panel! -->