Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A custom table panel for Panic's Status Board that can tabulate a Google Calendar feed.
<!-- 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! -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment