pushboard template (Google Calendar data source)

JSONP & Google cal to retrieve dataz

by edwardsharp

HTML

<script src="http://momentjs.com/downloads/moment.js"></script>
<img border="0" src="http://i.imgur.com/EhMz9EM.jpg" />
<div id="header">
    <p class="red">+ CLICK <a href="http://www.pushboardportland.com/">HERE</a> TO ADD AN EVENT TO AN UPCOMING WEEK. THIS WORKS BEST IF YOU SUBMIT YOUR EVENTS TO US EARLY.</p>
    <p>+ VIEW GOOGLE CALENDAR OF ALL UPCOMING EVENTS <a href="https://www.google.com/calendar/embed?src=pushboardportland%40gmail.com&ctz=America/Los_Angeles">HERE</a>. YOU CAN SYNC THIS CALENDAR WITH YOUR OWN.</p>
    <p>+ NEW INSTALLMENT EVERY MONDAY.</p>
</div>
<div id="output"></div>

CSS

img {
    width: 100%;
}
#header p {
    font: 0.75em arial, sans-serif;
    margin-bottom: 0.5em;
}
span {
    margin-right: 1em;
    font: 0.8em verdena, sans-serif;
    font-family: monospace;
}
.red {
    color: red;
}
.header_date {
    font: 1.5em monospace;
    font-weight: bold;
    display:block;
}
.name {
}
.time {
    background-color: #222;
    text-align: center;
    color: #fff;
}

JavaScript

function nextMonday() {
    var d = new Date();

    switch (d.getDay()) {
        case 0:
            d.setDate(d.getDate() + 1);
            break;

        case 2:
            d.setDate(d.getDate() + 6);
            break;

        case 3:
            d.setDate(d.getDate() + 5);
            break;

        case 4:
            d.setDate(d.getDate() + 4);
            break;

        case 5:
            d.setDate(d.getDate() + 3);
            break;

        case 6:
            d.setDate(d.getDate() + 2);
            break;
    }

    return d;

}

//pwnwn ngttpigcg45hjul9g0g1v4dadc%40group.calendar.google.com
//e# edward%40edwardsharp.net
//pb pushboardportland%40gmail.com
var cal_id = 'pushboardportland%40gmail.com';
var cal_api_key = 'AIzaSyAqQt7HUleo8MaaudUgm4O0C0k6oAqcukw';

var weekAfterNextMonday = moment(new Date(nextMonday())); 

weekAfterNextMonday.add(7, 'days');

console.log(nextMonday().toISOString());
console.log(weekAfterNextMonday.toISOString());
var url = 'https://www.googleapis.com/calendar/v3/calendars/' + cal_id + '/events?singleEvents=true&orderBy=startTime&timeMin=' + nextMonday().toISOString() + '&timeMax=' +weekAfterNextMonday.toISOString() + '&key=' + cal_api_key;

console.log(url);

$.getJSON(url, cellEntries);

function cellEntries(json) {
    //console.log(json);
    var out = document.createElement('div');
    var p;
    var dateHeading = nextMonday();
    var dateHeadingDay = 0;

    for (var i = 0; i < json.items.length; i++) {
        var entry = json.items[i];

        if (p != null) {
            out.appendChild(p);
        }
        p = document.createElement('p');

        var text = '';

        var start;
        if (entry.start.date) {
            start = entry.start.date;
        } else if (entry.start.dateTime) {
            start = entry.start.dateTime;
        }

        var startDateDay = new Date(start).getDay();
        //console.log("startDateDay: "+startDateDay+" dateHeadingDay:"+dateHeadingDay);


        if...