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.



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

		key: '<your-key-here>', // Google Calendar API Key see: https://console.developers.google.com
		calendar: '<google-calendar-id>',
		max: 10


See also  Build a Animated SVG Tab Menu Bar in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners



Parameter Description Type
key Google Calendar API Key String
calendar Google Calendar Id String
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">
            <div class="google_event_title">
                <a href="#" rel="Easter Sunday">Easter Sunday</a>
            <div class="google_event_date">Sat Mar 31, 2018</div>
            <div class="google_event_title">
                <a href="#" rel="Cinco de Mayo">Cinco de Mayo</a>
            <div class="google_event_date">Fri May 4, 2018</div>
            <div class="google_event_title">
                <a href="#" rel="Columbus Day (regional holiday)">Columbus Day (regional holiday)</a>
            <div class="google_event_date">Sun Oct 7, 2018</div>
            <div class="google_event_description">Description</div>

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


Download Source Code


Leave a Reply