Last active
August 11, 2016 20:27
-
-
Save jordanmerrick/5425582 to your computer and use it in GitHub Desktop.
A custom table panel for Panic's Status Board that can tabulate a Google Calendar feed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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