CODEWITHSUNDEEP
jquerygoogle-calendar-api
Rick Jolly
Rick Jolly

Reputation: 3009

Simple calendar reservation display using google calendar feed

I would like to display a read-only month calendar showing reserved days on a website using a google calendar feed. All days having events in google calendar would display as highlighted dates on the website calendar. Would jQuery UI Datepicker work well for this or is there a simpler calendar?

Upvotes: 0

Views: 1954

Answers (1)

Rick Jolly
Rick Jolly

Reputation: 3009

I used the jQuery UI datepicker and google calendar api V3 events list (play with the api here). I won't show a working example because I want to keep my api key private.

screenshot

I display the datepicker inline and style with the default (arrow) cursor so that it looks like a static calendar. Google calendar returns the events in json and I apply them to the relevent dates in the datepicker using its "beforeShowDay" function.

There were a few things I needed to know about the Google Calendar feed.

I used the option "singleEvents=true" so any repeating events returned all dates.

I used the "fields=items" option to return only relevent data (like summary and dates) to increase performance.

I used the "timeMin" and "timeMax" option to specify a range of dates to return (I used dates calculated a year before and after today's date). Google expects those dates to be in a format like: "yyyy-mm-ddT00:00:00+00:00".

In the returned json, all day event dates are found in the variable "start.date" and "end.date", but for all day events the end date is the next day! If the event isn't all day, then you need to look for the dates in the "start.dateTime" and "end.dateTime" variables instead.

One reason to use Google's V3 api is that, unlike V2, it will return event colours (in the colorId variable) - but the colour isn't a hex value it is simply an integer you have to convert so something meaningful.

Upvotes: 1

Related Questions