I’ve built several band websites on Harmony and one of my favorite features of the platform is how slick it is to display upcoming calendar events. I’ve never been into the embeddable widgets like those from reverbnation. You lose branding and they’ve always seemed tacky. Harmony Data Feeds allow you to do it your own way.
Data Feeds give you access to any external json or xml feed and its data so you can easily include it in your template. The guys at Ordered List were smart enough to include some preset services, including Google Calendar. Give it a calendar ID and it finds the feed for you. Easy.
What’s not quite as easy is navigating the Google Calendar data tree. There’s a ton of nested information there and it took me a while to figure out what bits I actually wanted to show.
The Code
This is what I ended up with using my data feed titled ‘shows’:
<ul>
{% feed 'shows' %}
{% if feed.data.feed.entry == null %}
<em>No shows are currently scheduled</em>
{% else %}
{{ feed.data.feed.entry | reverse | assign_to:'sorted_shows' }}
{% for entry in sorted_shows %}
<li>
<a href="http://maps.google.com/maps?q={{ entry.["gd$where"][0]["valueString"] }}&hl=en">
<h4 class='venue'>
{{ entry.title.["$t"] }}
</h4>
<time class='date'>
{{ entry.["gd$when"][0]["startTime"] | date: '%-m/%-d' }}
</time>
<span class="other-acts">{{ entry.content.["$t"] }}</span>
<span class="misc">
starts at {{ entry.["gd$when"][0]["startTime"] | date: '%-I%p' }}
</span>
</a>
</li>
{% endfor %}
{% endif %}
{% endfeed %}
</ul>
Throw that in an include and place it wherever you want.
Breaking it down
{% if feed.data.feed.entry == null %}
<em>No shows are currently scheduled</em>
{% else %}
If there aren’t any entries, display a message saying there aren’t any shows. Remember this feed is for upcoming events only, so you don’t have to worry about past events showing up.
{{ feed.data.feed.entry | reverse |
assign_to:'sorted_shows' }}
This bit takes the array of entries which is sorted by date, reverses the order so you get descending date order, and assigns it to the “sorted_shows” variable.
{% for entry in sorted_shows %}
Fairly self explanatory. Do what’s nested for each event in our sorted array.
<a href="http://maps.google.com/maps?q=
{{ entry.["gd$where"][0]["valueString"] }}&hl=en">
This part grabs the first “Where” information from an event and gets the value of the string. I’m not really sure why there would be multiple “Where” data strings1, but the first one is what we need right now. I’m then putting that in a Google Maps search query link.
{{ entry.title.["$t"] }}
The title of the event. I’m using this field for the name of the venue. “$t” seems to be the string. Don’t ask me why.
{{ entry.["gd$when"][0]["startTime"] |
date: '%-m/%-d' }}
Again grabbing the first start time data and using Harmony’s date filter to show only the month and date.
{{ entry.content.["$t"] }}
The description/details of the event. I’m using it to show cover charge and other acts.
starts at {{ entry.["gd$when"][0]["startTime"] |
date: '%-I%p' }}
Here we have the start time again, but only showing the hour and am/pm.
What you end up with is a nice list of your events on your website while you create them by the more familiar way of using a calendar.
1 This might have to do with repeating events. As you can see by looking at the data structure, their API is pretty complex.
