jQuery Plugin To Display Google Calendar Feeds On Website

jQuery Plugin To Display Google Calendar Feeds On Website

A jQuery Google calendar widget that retrieves event data from your Google calendar and displays them in a fully customizable list.

See also:

How to use it:

1. Include necessary jQuery javascript library on the webpage.

<script src="/path/to/jquery.min.js"></script> 

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

<script src="js/googleCalendarEvents.min.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:

  key: 'API KEY', 
  calendar: 'Calendar here'

5. Specify the maximum number of events to display. Default: 10.

  key: 'API KEY', 
  calendar: 'Calendar here',
  max: 5

6. 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;



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


  • 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.

  • Publication date: 11.02.2019
  • Source