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.

 

See also  JavaScript Program to Replace All Line Breaks with (break) br Tags Using Regular Expression in Browser Full Project For Beginners

 

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>

 

See also  Build a Animated SVG Tab Menu Bar in Browser Using HTML5 CSS3 and Javascript Full Project 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

 

See also  Node.js Express Indian Bank Information Finder By IFSC Code Full Web App Deployed to Website Online 2020

 

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>

See also  Build a Hexadecimal to RGB Color Converter in Browser Using Javascript Full Project For Beginners

 

Download Source Code

 

Leave a Reply