I use Google Calendar to store all the past and future concerts of my band . Now I want to display on the band’s website the list of upcoming events, based on the content of that calendar.

First, you have to make the calendar public. You can then get all its content in iCal format. The URL you’ll find in the calendar settings looks like this: 

https://www.google.com/calendar/ical/coolcavemen.com_h3432m0aeeq5c6dakki50giqeo%40group.calendar.google.com/public/basic.ics

The RSS feed version of that URL looks like: 

https://www.google.com/calendar/feeds/coolcavemen.com_h3432m0aeeq5c6dakki50giqeo%40group.calendar.google.com/public/full

But the provided events there are messed up and contain all past events. To only get sorted future events, we’ll add some extra parameters: 

https://www.google.com/calendar/feeds/coolcavemen.com_h3432m0aeeq5c6dakki50giqeo%40group.calendar.google.com/public/full?orderby=starttime&sortorder=ascending&futureevents=true

Now that we have a nicely sorted list of upcoming concerts, we’ll get it’s JSON version: 

https://www.google.com/calendar/feeds/coolcavemen.com_h3432m0aeeq5c6dakki50giqeo%40group.calendar.google.com/public/full?orderby=starttime&sortorder=ascending&futureevents=true&alt=json

And around this data feed, I’ve built a quick and dirty JavaScript piece of code to display a nice list of upcoming concerts. Here is the source: 

<ul id="next-gigs">
 <li>
  No gig planned yet... :(
 </li>
 <li>
  Feeds:
  <a href="https://www.google.com/calendar/feeds/coolcavemen.com_h3432m0aeeq5c6dakki50giqeo%40group.calendar.google.com/public/full?orderby=starttime&amp;sortorder=ascending&amp;futureevents=true">
   RSS
  </a>
  ,
  <a href="https://www.google.com/calendar/ical/coolcavemen.com_h3432m0aeeq5c6dakki50giqeo%40group.calendar.google.com/public/basic.ics">
   iCal
  </a>
  .
 </li>
</ul>
<script charset="utf-8" type="text/javascript">
 jQuery(function(){
    // Get list of upcoming iCal events formatted in JSON
    jQuery.getJSON("https://www.google.com/calendar/feeds/coolcavemen.com_h3432m0aeeq5c6dakki50giqeo%40group.calendar.google.com/public/full?orderby=starttime&sortorder=ascending&futureevents=true&alt=json", function(data){
      // Utility method to pad a string on the left
      // Source: https://sajjadhossain.com/2008/10/31/javascript-string-trimming-and-padding/
      function lpad(str, pad_string, length) {
        var str = new String(str);
        while (str.length < length)
          str = pad_string + str;
        return str;
      };
      // Parse and render each event
      jQuery.each(data.feed.entry, function(i, item){
        if(i == 0) {
          jQuery("#next-gigs li").first().hide();
        };
        var event_url = jQuery.trim(item.content.$t);
        var event_header = item.title.$t;
        if(event_url.length > 0) {
          event_header = "<a href='" + event_url + "'>" + event_header + "</a>";
        };
        // Format the date string
        var d = new Date(item.gd$when[0].startTime);
        var d_string = '<strong>' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + '</strong>';
        if(d.getHours() != 0 || d.getMinutes() != 0) {
          d_string = d_string + ' at ' + lpad(d.getHours(), '0', 2) + ':' + lpad(d.getMinutes(), '0', 2);
        };
        // Render the event
        jQuery("#next-gigs li").last().before(
          "<li><strong>"
          + event_header
          + "</strong><br/>Date: "
          + d_string
          + "<br/>Venue: <a href='https://maps.google.com/maps?q="
          + item.gd$where[0].valueString
          + "' target='_blank'>"
          + item.gd$where[0].valueString
          + "</a></li>"
        );
      });
    });
  });
</script>

13 archived comments

Comments are closed. These were posted on Disqus, and are archived here.

  1. Franz

    Good job! Really useful.

    You have to fix

    ... d.getMonth() + '-' + d.getDate() ...

    , and +1 each one, cause is an array that starts at 0.

    Plus, if add this little piece of code before declaration of var d, it could be more friendly :D

    // Change Months Numbers for Months
var monthName = new Array (12);
month[1]="January";
month[2]="February";
month[3]="March";
month[4]="April";
month[5]="May";
month[6]="June";
month[7]="July";
month[8]="August";
month[9]="September";
month[10]="October";
month[11]="November";
month[12]="December";

    And then in the code we change

    ... (d.getMonth()+1) ...

    for

    monthName[(d.getMonth()+1)]

    (Same applies for Days, just more lines)

    1. Kevin Deldycke Author

      I created this JavaScript snippet in a hurry. That's why the code is quite stupid. Thanks Franz for your contribution !

  2. Andrew

    I'm getting the following error:

    TypeError: 'undefined' is not an object (evaluating 'item.gd$when[0]')

    any ideas?

    1. Andrew

      scratch that! Got it fixed :-D MANY THANKS for this script!

  3. Brandon

    Can I sort multiple calendar's by storing them in an array and then sorting them all by starttime. For example
    Boys Basketball Calendar (event) feb 24th
    Girls Basketball Calendar (event) March 2nd
    Boys Basketball Calendar (event April 1st
    Boys Basketball Calendar (event) April 2nd
    Girls Basketball Calendar (event) April 3rd...

    etc.
    I know there is an answer! I need to sort the json object.. Put the array of url' feeds into one json object (master calendar).

    Brandon

  4. Ben

    Thanks very much! This is just what I wanted.
    Is there a way to limit the number of calender entries that are displayed. i.e. to 4?
    Thanks

    1. Ben

      I just thought I would reply to my own comment as I found out the answer (in case someone else stumbles across this page!).

      If you add: &max-results=5 to the end of

      http://www.google.com/calendar/feeds/coolcavemen.com_h3432m0aeeq5c6dakki50giqeo%40group.calendar.google.com/public/full?orderby=starttime&sortorder=ascending&futureevents=true
      this you can limit the number of events that are pulled from the Google calendar (to 5 in this case).

  5. Darren

    Great work. Thankyou! I'm new to this kind of stuff so I'm a bit unsure, but has anyone else experienced problems with this code and internet explorer? Any suggestions as to what the compatibility issue is? ....wouldn't life be so much easier if IE was never invented? :)

    1. Darren

      Hi I think I found a fix to my IE problem. If you add

      jQuery.support.cors = true; to the code it fixes problem.

      More info and thanks to http://lestopher.tumblr.com/post/21742012438/if-youre-using-ie8-and-getjson

  6. Koopa

    Beyond useful!!! Thanks!!!

  7. G

    do you have a solution, now that the full feed link has been deprecated by google? cheers!

  8. Andrew

    Yes -- I'm looking for a solution to my now broken feed :'(

  9. Andrew

    I started to use the solution here:

    https://stackoverflow.com/questions/23122936/parse-google-calendar-v3-api-json-with-jquery

    and I was able to get a list of events, but then it stopped working suddenly!