jQuery plugin that fetches up-to-date Google calendar information on the client-side.

This was made primarily for website contractors who develop sites for their clients. It makes it so that if the client needs to update a calendar / add events to their website, they can simply update it on their Google Calendar and the change will be automatically reflected on the website.

This allows developers to link ANY public Google Calendar to their website and grab its contents with a single jQuery request. To get the library setup, the user must include jQuery and the google-calendar-events.js file, then define these variables in the header:

var mykey = '<your-google-api-key>'; 
var calendarid = '<public-google-calendar-id>'; 
var maxEvents = 10; // optional

Then, they are ready to use any of the below jQuery calls to fetch data from their calendar.

jQuery Calls

Keep in mind that all of the returned events are ordered by their start time - so the one starting closest to the current time is returned first (at index 0), etc. Also, this doesn't return events that happen on the day the request is made.

Here is how you use the plugin:

General Structure

$.grabCalendar(type, date_formatted)


type - (optional) This a string that can be either "events" or "detailedEvents". "events" will return a concise response that will be what most developers will be looking for (start, end, location, summary, description). "detailedEvents" will return a raw (& verbose) response containing a greater number of more fields. If this parameter is excluded completely, the response will give extended information for the Google Calendar including the events and general information about the calendar (timezone, name of calendar, description, etc.)

date_formatted - (optional) This is a boolean value that gives the date in a more friendly format if set to true. For example, 2015-08-17T06:30:00-04:00 would become Monday August 17, 2015 - 6:30 AM. If this is set to false or is excluded, the date will come in the standard ISO-8601 format (YYYY-MM-DDThh:mmTZD). This parameter can also be used even if no type is included in the call.

Example Calls

These are all of the supported & valid calls:

$.grabcalendar("events", true);
$.grabcalendar("detailedEvents", true);

Personally, I believe the $.grabcalendar("events", true) will be the most practical & useful for web developers. The index.html file has an example web page that includes everything you need (except your unique information) to run the jquery plugin.

Response Format

All of the requests return a JSON response. Here is an example response from calling $.grabcalendar("events", true):

        "start": "Sunday August 16, 2015 - 8:00 AM",
        "end": "Sunday August 16, 2015 - 3:00 PM",
        "summary": "All Time Low ft. We The Kings",
        "description": "venue: Dad's House\ntickets:",
        "location": "Detroit, MI"
        "start": "Monday August 17, 2015 - 4:30 AM",
        "end": "Monday August 17, 2015 - 6:30 AM",
        "summary": "Flo-Rida ft. Ian Graves",
        "description": "venue: St. Andrews Hall\ntickets:",
        "location": "Detroit, MI"
        "start": "Tuesday August 18, 2015 - 7:30 AM",
        "end": "Tuesday August 18, 2015 - 9:00 AM",
        "summary": "Skrillex, Diplo, Datsik ft. Boys Noize",
        "description": "venue: The Fillmore\ntickets:",
        "location": "Philedelphia, PA"
        "start": "Wednesday August 19, 2015 - 2:30 AM",
        "end": "Wednesday August 19, 2015 - 5:00 AM",
        "summary": "Say Anything ft. Modern Baseball",
        "description": "venue: Lollapalooza\ntickets:",
        "location": "Austin, TX"
Share this project: