jQuery Plugin To Display Google Calendar Feeds On Website

jQuery Plugin To Display Google Calendar Feeds On Website
File Size: 38.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

$('.google_cal').google_calendar_events({
  key: 'API KEY', 
  calendar: 'Calendar here'
});

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

$('.google_cal').google_calendar_events({
  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;
}

Changelog:

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.