The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Google calendar jQuery plugin : display your Google calendar events now on your website

Tags :

Plugin rate :

Google Calendar plugin :
- pulls events that you create in your public Google calendar and displays them on your website.
- you may choose how many events to display at a time.
- each event box can show the event start date-time, timezone, location of the event, summary and description of the event.
- each event box has a link to the original event you defined in your calendar.

Implementation: 

HOW TO USE

The download pack contains the plugin file gcal-events.min.js and the HTML file gcal-events.html that I have deployed in my live demo.

 

1. GET YOUR GOOGLE CALENDAR API KEY

This is a simple 2-minute process; just visit the API console.

If you see a "Create project" button, click it to create a new project. Select the Services pane, and activate the Google Calendar API.

 

gcal1.png

 

Visit the API Access pane. The API key is near the bottom of that pane, in the section titled "Simple API Access." Note this API key.

 

gcal2.png

 

For more details on this visit official Google Doc.

 

 

2. CREATE A PUBLIC GOOGLE CALENDAR

Navigate to your Google calendar account and create a new calendar.

 

gcal3.png

 

Fill in the details as shown and make the calendar public.

 

gcal4.png

 

Navigate to the calendar setting and note your Calendar Id as shown in these screens.

 

gcal5.png

 

gcal6_0.png

 

 

3. JAVASCRIPT

Now paste your Calendar Id and your API key in the javascript as shown below

1
2
3
4
5
6
var googleCalendarId="6loaiktn6ragmscc8p90svgmn0@group.calendar.google.com";
var googleCalendarApiKey="AI------------------------------MIjg";
var maxGcalEvents = 5;
 
//optional parameters-----------------------------------------------
var colorBox=["green","red","rgb(100,100,120)","#e2e2e2"];

 

 

4. INCLUDE THE GOOGLE CALENDAR PLUGIN - HTML

Before your body tag ends in your HTML, include the plugin as shown

1
2
3
4
5
<body>
  ...
  ... 
  <script src="./gcal-events.min.js"></script>
</body>

 

And your events are online and ready to go big !

Options: 
maxGcalEvents
Integer
Default : 5 - maximum number of events you want to display at a time
colorbox
Array
Optional parameter. This is a javascript array that holds color codes for each of the event boxes and will be applied in a cycle. The color code can be of the form "rgb(r,g,b)" or "#xxx" or any HTML color value.
Screenshots

Comments

very very good easy to read and understand good job

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
1.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Comments [1]