JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://greatermediaphiladelphia.net/wmmr/date-bundle.js"></script>
<div id="coming-up" class="right-block pti">
</div>
CSS
body {font-family:“Helvetica Neue”, Arial, Helvetica, sans-serif;}
#coming-up {overflow:hidden; width:160px; background:#E2E2E2; color:#555;}
#coming-up.hover {background:#EDEDED;}
#coming-up ul {list-style:none; margin:0; padding:0; overflow:hidden;}
#coming-up li {list-style:none; margin:0; padding:0; width:160px; overflow:hidden; border-bottom: 1px solid #ddd; border-top: 1px solid #fff; background:#E2E2E2; float:left;}
#coming-up li.hover {background:#EDEDED;}
#coming-up li a, #coming-up li a:link { display:block; overflow:hidden; color:#6F0B07;}
#coming-up li a:hover {text-decoration:none;}
#coming-up li span { display:block; float:left; padding:5px 5px 5px 0; }
#coming-up li span.title {float:none; padding-left:10px; padding-right:10px; font-size:110%; text-align:center; color:#555; text-shadow: 0 1px 1px #fff; font-weight:600; }
#coming-up li span.dtstart { margin: 0 15px 0 0; text-align:right; min-height:20px; min-width:30px; text-shadow: 0 1px 1px #fff; color:#555; padding-left:5px;}
#coming-up li span.description {display:block; max-width:50%; font-weight:600;}
#coming-up li a:hover span.description {text-decoration:underline;}
#coming-up li.now {border-top:0;}
#coming-up li.now span.dtstart {width:30px;}
#coming-up li.now span.description {font-size:110%;}
#coming-up ul.next li {border-top:0px;}
#coming-up ul.next li a, #coming-up li a:link {cursor:pointer;}
div#ll-ad {display:block; text-align:center; margin:0; padding:0; background:#E2E2E2; }
#coming-up #later-toggle {border-top: 1px solid #fff;}
#coming-up a.toggle-button { cursor: pointer; text-align:center; display:block; text-transform: capitalize; text-indent:-9999px; background:url('http://www.wmmr.com/Pics/Global/plus-minus.png') top center no-repeat #E2E2E2; overflow: hidden; clear:both; margin:5px; height:13px;}
#coming-up a.toggle-button.collapse {background-position:bottom center;}
#coming-up a.toggle-button:hover {background-color:#EDEDED;}
JavaScript
function ISODateString(d) { //formats a date string so Google Calendar API will understand it
function pad(n) {
return n < 10 ? '0' + n : n
}
return d.getUTCFullYear() + '-' + pad(d.getUTCMonth() + 1) + '-' + pad(d.getUTCDate()) + 'T' + pad(d.getUTCHours()) + ':' + pad(d.getUTCMinutes()) + ':' + pad(d.getUTCSeconds()) + 'Z'
}
function validateURL(textval) { // checks a string to see if it's a URL
var urlregex = new RegExp("^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$");
return urlregex.test(textval);
}
function getGCal(){ // gets the JSON data from your (publicly available) Google Calendar. Sends the JSON data to makeApptModule();
var today = (Date.today().setTimeToNow());
today = ISODateString(today);
var tomorrow = (Date.parse('tomorrow'));
tomorrow = ISODateString(tomorrow);
var appts = {};
// Google Calendar parameters:
// &singlevents = breaks out recurring events into their own daily entries
// &orderby = orders the feed according to when your events start, chronologically
// &sortorder
// &start-min = pass it the "today" variable. Today = right this minute. Will show events in progress.
// &start-max = pass it "tomorrow" and the feed will not show events that take place after midnight tonight.
$.getJSON('https://www.google.com/calendar/feeds/[email protected]/public/full?alt=json&singleevents=true&orderby=starttime&sortorder=ascending&start-min=' + today +'&start-max=' + tomorrow,
function(data) {
i...