jQuery Plugin to Display Google Calendar on Website – Coding Shiksha

jQuery Plugin to Display Google Calendar on Website – Coding Shiksha

Welcome folks I am back with another blog post. In this blog post we will be talking about a jQuery Plugin which allows you to display Google Calendar on your Website. The Plugin name is GoogleCalendarEvents.js . The Source code of the Application is given below. Just copy it and also extend it according to your needs.

 

READ  Login with Google Account using Javascript

 

Google calendar events is a jQuery plugin that displays a public google calendar events feed.

 

Usage

<div id="my-element"></div>

<script>
	$('#my-element').google_calendar_events({
		key: '<your-key-here>', // Google Calendar API Key see: https://console.developers.google.com
		calendar: '<google-calendar-id>',
		max: 10
	});
</script>

 

READ  Redis Caching in Node.js

 

Options

Parameter Description Type
key Google Calendar API Key String
calendar Google Calendar Id String
max
Max number of results (default 10) Number

 

READ  Image Crop and Upload using JQuery with PHP Ajax

 

Example Output

 

<div id="my-element">
    <ul class="google_event_list">
        <li>
            <div class="google_event_title">
                <a href="#" rel="Easter Sunday">Easter Sunday</a>
            </div>
            <div class="google_event_date">Sat Mar 31, 2018</div>
        </li>
        <li>
            <div class="google_event_title">
                <a href="#" rel="Cinco de Mayo">Cinco de Mayo</a>
            </div>
            <div class="google_event_date">Fri May 4, 2018</div>
        </li>
        <li>
            <div class="google_event_title">
                <a href="#" rel="Columbus Day (regional holiday)">Columbus Day (regional holiday)</a>
            </div>
            <div class="google_event_date">Sun Oct 7, 2018</div>
            <div class="google_event_description">Description</div>
        </li>
    </ul>
</div>

READ  JSPDF IMAGE TO PDF - JSPDF Tutorial

 

Download Source Code

 

Leave a Reply

Close Menu