Ask your JavaScript questions! Pay money and get answers fast! (more info)

Google Calendar Integration JavaScript

  • SOLVED

I need a javascript solution that will read a Google Calendar public RSS feed and output events in the following fashion:

Example Public Google Calendar feed:
http://www.google.com/calendar/feeds/engineering%40missouri.edu/public/full/?orderby=starttime&sortorder=ascending&futureevents=true&singleevents=true&max-results=5


<ul class="calendar">
<li class="calendar-list clearfix">
<a class="clearfix" href="http://www.google.com/calendar/event?eid=dDIzZjY0aG8xbzlvcWRnZGFqNHBsYWNiNmNfZWxwbTJnMzhkdG02aXAzMWY0bjY2b2JjY2xuNjhvYmk1cGptdXJyN2RoaWlzb3JmZGtfZGxrbmt1amZlbGltc3ByOWRwaW1hc2o5ZHBqazBwcmRjNWttb2JqM2R0bWdfMjAxMTA3MDQgZW5naW5lZXJpbmdAbWlzc291cmkuZWR1&ctz=America/Chicago">
<div class="calendar-icon">
<div class="month">
Jul</div>
<div class="day">
4</div>
<div class="year">
2011</div>

</div>
<div class="calendar-title">
Independence Day &raquo;
</div>
<div class="calendar-location">
</div>
</a>
</li>


<li class="calendar-list clearfix">
<a class="clearfix" href="http://www.google.com/calendar/event?eid=MmM2aDBmZWZwM2g4YWphZnI4bzlxYmVsamsgZW5naW5lZXJpbmdAbWlzc291cmkuZWR1&ctz=America/Chicago">
<div class="calendar-icon">
<div class="month">
Jul</div>
<div class="day">

10</div>
<div class="year">
2011</div>
</div>
<div class="calendar-title">
Summer Camp &raquo;
</div>
<div class="calendar-location">
University of Missouri College of Engineering</div>
</a>
</li>


<li class="calendar-list clearfix">

<a class="clearfix" href="http://www.google.com/calendar/event?eid=ZGtyazQwbGthZTNtaDdzdG51b3M1ajUybmsgZW5naW5lZXJpbmdAbWlzc291cmkuZWR1&ctz=America/Chicago">
<div class="calendar-icon">
<div class="month">
Jul</div>
<div class="day">
17</div>
<div class="year">
2011</div>
</div>
<div class="calendar-title">
Summer Camp &raquo;
</div>
<div class="calendar-location">

Lafferre Hall Columbia, MO 65211</div>
</a>
</li>


<li class="calendar-list clearfix">
<a class="clearfix" href="http://www.google.com/calendar/event?eid=c2RtMTh1bWFzaWpicWlxcnNscnVrMDdvaGMgZW5naW5lZXJpbmdAbWlzc291cmkuZWR1&ctz=America/Chicago">
<div class="calendar-icon">
<div class="month">
Aug</div>
<div class="day">
26</div>
<div class="year">
2011</div>

</div>
<div class="calendar-title">
Seminar in Geotechnical Engineering &raquo;
</div>
<div class="calendar-location">
Ketcham Auditorium</div>
</a>
</li>


<li class="calendar-list clearfix">
<a class="clearfix" href="http://www.google.com/calendar/event?eid=ZG1nZTJoZjM4bDA5aGE4bmRjMjdnMXI5bzQgZW5naW5lZXJpbmdAbWlzc291cmkuZWR1&ctz=America/Chicago">
<div class="calendar-icon">
<div class="month">
Sep</div>

<div class="day">
2</div>
<div class="year">
2011</div>
</div>
<div class="calendar-title">
Seminar in Geotechnical Engineering &raquo;
</div>
<div class="calendar-location">
Geotechnical Engineering</div>
</a>
</li>

</ul>

Answers (2)

2011-06-24

Christianto answers:

Hi,

Is it ok to use jQuery?

I include a demo zip that use jQuery Google Calendar feed reader plugin that I modify to output the feed that fit your requirement.
there are 3 parameter that you can change

target: '#googlecalendar',
feedUri: 'http://www.google.com/calendar/feeds/engineering%40missouri.edu/public/full/',
maxresults: 30,

target is the container that use to place the output, feedUri is your feed URL (only URL not with its parameter), maxresults is max feed you want to display.

If you have a question don't hesitate to ask, let me know if this work or return error in your site.

Thanks,
Christianto


Christianto comments:

Hi,

I update the script so it can receive additional parameter that you can pass to it..

target: '#googlecalendar',
feedUri: 'http://www.google.com/calendar/feeds/engineering%40missouri.edu/public/full/', maxresults: 5,
orderby: 'starttime',
sortorder: 'ascending',
futureevents: true,
singleevents: true,
displayCount: 0

its the same parameter like your feed url example..
http://www.google.com/calendar/feeds/engineering%40missouri.edu/public/full/?orderby=starttime&sortorder=ascending&futureevents=true&singleevents=true&max-results=5

Let me know if you need to apply it on your site..
Hope this help..

Best,
Christianto