jQuery Plugin To Display Google Calendar Feeds On Website

A jQuery & Vanilla JavaScript Google calendar plugin that retrieves event data from your Google calendar and displays them in a fully customizable list.

Requires jQuery OR Moment.js library.

More Features:

• Custom date & time format.
• Custom start/end times.
• Allows you to customize the order to display the events.
• Allows to specify the maximum number of events to display.
• Allows to specify an event to display.

See also:

• jQuery Google Calendar Event List Widget - gCalFlow
• jQuery Plugin For Displaying Your Google Calendar Events - myEvents

How to use it:

1. Include necessary jQuery or moment.js Javascript library on the webpage.

<!-- As a jQuery plugin -->
<script src="/path/to/cdn/jquery.min.js"></script> 

<!-- As a Vanilla JavaScript plugin -->
<script src="/path/to/cdn/moment.min.js"></script> 
<!-- OPTIONAL -->
<script src="/path/to/cdn/moment-timezone.min.js"></script> 

2. Include the Google Calendar List plugin after jQuery library.

<!-- As a jQuery plugin -->
<script src="/path/to/dist/jquery-google-calendar-events.min.js"></script> 

<!-- As a Vanilla JavaScript plugin -->
<script src="/path/to/dist/google-calendar-events.js"></script> 

3. Create an empty container to place the Google calendar widget.

<div class="google_cal"></div>

4. Initialize the plugin on the container element, insert the Google API key and specify the calendar ID as follows:

// As a jQuery plugin
$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
});

// As a Vanilla JavaScript plugin
new GoogleCalendarEvents('API KEY')
    .calendarId('[email protected]')
    .maxResults(20)
    .momentDateFormat('MMMM Do YYYY')
    .render('.google_cal');

5. Specify the maximum number of events to display. The number of events in the resulting page may be less than this value, or none at all, even if there are more events matching the query. Default: 10.

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  maxResults: 5
});

6. Determine the order of the events returned in the result. Acceptable values: "startTime", "updated".

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  orderBy: "startTime"
});

7. Determine the text search terms to find events that match these terms in any field, except for extended properties.

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  q: ""
});

8. Determine whether to include deleted events (with status equals "cancelled") in the result. Cancelled instances of recurring events (but not the underlying recurring event) will still be included if showDeleted and singleEvents are both False. If showDeleted and singleEvents are both True, only single instances of deleted events (but not the underlying recurring events) are returned. Default: false.

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  showDeleted: false
});

9. Determine whether to expand recurring events into instances and only return single one-off events and instances of recurring events, but not the underlying recurring events themselves. Default: true.

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  singleEvents: true
});

10. Determine the Upper/Lower bound (exclusive) for an event's start time to filter by. Must be an RFC3339 timestamp with mandatory time zone offset, for example, 2011-06-03T10:00:00-07:00, 2011-06-03T10:00:00Z. Milliseconds may be provided but are ignored. If timeMin is set, timeMax must be greater than timeMin.

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  timeMax: null,
  timeMin: startOfToday.toISOString();
});

11. Determine the time zone used in the response.

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  timeZone: null
});

12. Determin the lower bound for an event's last modification time (as a RFC3339 timestamp) to filter by. When specified, entries deleted since this time will always be included regardless of showDeleted.

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  updatedMin: null
});

13. Determin the date & time formats.

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendarId: '[email protected]'
  momentDateFormat: 'dddd, MMMM Do YYYY',
  momentTimeFormat: 'h:mm a'
});

14. Style the plugin in the CSS as follows.

.google_cal { margin-left: 16px; }

.google_cal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.google_cal li { margin-bottom: 18px; }

.google_cal a,
.google_cal_2 a {
  text-decoration: none;
  color: #0065c3;
}

.google_cal a:hover,
.google_cal_2 a:hover { color: #118cff; }

.google_cal .google_event_title,
.google_cal_2 .google_event_title {
  display: block;
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
}

.google_cal .google_event_date {
  display: inline-block;
  color: #555;
  font-size: 13px;
  font-style: italic;
}

.google_cal .google_event_location { display: none; }

.google_cal .google_event_description {
  display: block;
  margin-top: 2px;
}

Changelog:

v2.0.0 (2020-03-18)

• Added more options
• Removed jQuery requirement
• Added better date/time formatting
• Fixed all-day event date display
• Use rollup for javascript bundling

2019-02-11

• v1.1.0: rewrote plugin; demo & doc updated

2015-01-15

• updated to google calendar API v3,

 

---

This awesome jQuery plugin is developed by mmonkey. For more Advanced Usages, please check the demo page or visit the official website.