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  React Hooks Simple Calculator From Scratch

 

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  What is AJAX? How it Works Short Explanation | Tutorial for Beginners

 

Options

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

 

READ  How to add Custom Fonts in JSPDF | JSPDF Tutorial | Html to Pdf Tutorial

 

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  How to Delete Files Stored in Google Drive using Google Drive API V3 in Javascript

 

Download Source Code

 

Leave a Reply