Google Calendar Embed Iframe in Full Year View Script
Google Calendar is great and can be used for personal, events, and booking calendars. Many people do not consider using Google Calendar for things like a event venue booking calendar or vacation home rental availability calendar. The reason so many people do not use Google Calendar for these reasons is because of the lack of features in the embed / iframe options.
Google Calendar Embed Year View
When using Google Calendar as an event venue or booking system, it lacks very much in the embedding options. If you want to embed Google Calendar in your website, it can only be done in the Monthly and Weekly views. Also the navigation inside of Google Calendar makes it very hard to jump to future months; you can only progress one month at a time when navigating a Google Calendar iframe embed.
Many people have suggested to Google to have a full year view option in the embedded calendars. People have been asking Google for this for ten years. It would not be hard for a developer to implement. So why doesn’t Google just add this feature? Perhaps it has to do with funding (I doubt that), or possibly it has to do with monopolizing the internet calendars. If Google put time and effort into their calendar embed system, they could put several calendar and booking companies out of business.
Google Calendar Jump to Month for Iframe Embed
My free solution for using Google Calendar as a booking system allowing jumping to future months with easy navigation, as well as options to the output style like number of months to show, number of years to show, as well as layouts in columns or rows.
Here is my Google Calendar JavaScript:
Example Embeds Screenshots:
Live Google Calendar Example
3 Different CSS Layout Examples
4 Columns Centered CSS
<style>
/* 4 Columns Centered */
iframe[name='calendar']{
height:600px;
width:100%;
border:0;
}
#GCoptions{
position:relative;
width:100%;
max-width:800px;
}
.GCcolumn{
position:relative;
float:left;
text-align:center;
}
.GCyear{
margin-bottom:0;
}
.GClink{
display:block;
clear:both;
}
.GCclear{
width:100%;
height:20px;
position:relative;
clear:both;
}
</style>
One Column CSS
<style>
/* One Column */
iframe[name='calendar']{
height:600px;
width:100%;
border:0;
}
#GCoptions{
position:relative;
width:100%;
max-width:800px;
}
.GCcolumn{
position:relative;
float:left;
}
.GCyear{
margin-bottom:0;
}
.GClink{
display:block;
position:relative;
float:left;
margin-right:10px;
}
.GCclear{
width:100%;
height:20px;
position:relative;
clear:both;
}
</style>
3 Columns 3 months per row CSS
<style>
/* 3 Columns 3 months per row */
iframe[name='calendar']{
height:600px;
width:100%;
border:0;
}
#GCoptions{
position:relative;
width:100%;
max-width:800px;
}
.GCcolumn{
position:relative;
float:left;
}
.GCyear{
margin-bottom:0;
}
.GClink{
display:block;
position:relative;
float:left;
margin:0 1% 6px 0;
width:31%;
}
.GCclear{
width:100%;
height:20px;
position:relative;
clear:both;
}
</style>
HTML / JavaScript
<!-- Google Calendar Jump to Month Script -->
<div id="GCoptions"></div>
<!-- Google Calendar iframe paste below, add name="calendar" -->
<iframe name="calendar" src="YOUR_CALENDAR_EMBED_URL" style="border: 0; height:600px;" frameborder="0" scrolling="no"></iframe>
<script>
/*
Google Calendar Jump to Month Script v 1.0
by Daniel Chase @ https://riseofweb.com
*/
function GoogleCalendarJump(){
var iframeName = "calendar"; //What is the Name attribute for the Google Calendar iframe embed?
var divHolder = "GCoptions"; //The DIV ID attribute to write to
var months = 48; //How many months you would like to show
var maxYear = 3; //Max number of full years to show
var columns = 3; //How many columns?
var iframeLink = document.getElementsByName(iframeName)[0].src;
var theMonths = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var today = new Date();
var month = today.getMonth();
var year = today.getFullYear();
var i;
var link;
var writeToDiv = '';
var yearCount = 0;
function replaceFrameURL(url,param,value) {
var re = new RegExp("([?|&])" + param + "=.*?(&|$)","i");
if (url.match(re))
return url.replace(re,'$1' + param + "=" + value + '$2');
else
return url + '&' + param + "=" + value;
}
columns = Math.floor(100/columns);
writeToDiv = '<div class="GCcolumn" style="width:'+columns+'%;">';
writeToDiv = writeToDiv + '<h3 class="GCyear">' + year + '</h3>';
for (i=0; i<months; i++) {
link = String(year) + String(("0" + (month+1)).slice(-2)) + '01';
link = String(link) + '/' + String(link);
link = replaceFrameURL(iframeLink,'dates',link);
writeToDiv = writeToDiv + '<a class="GClink" href="'+link+'" target="'+iframeName+'">' + theMonths[month] + '</a>';
month++;
if (month % 12 === 0){
year++;
yearCount++;
if(yearCount >= maxYear){ break; }
writeToDiv = writeToDiv + '</div><div class="GCcolumn" style="width:'+columns+'%;">';
writeToDiv = writeToDiv + '<h3 class="GCyear">' + year + '</h3>';
}
if (month > 11) {
month = 0;
}
}
writeToDiv = writeToDiv + '</div><div class="GCclear"></div>';
document.getElementById(divHolder).innerHTML = writeToDiv;
}
(function(){ GoogleCalendarJump(); })();
</script>
How to install:
Get your Google Calendar Embed Code. In Google Calendar go to the ‘Calendar Details’ -> ‘Embed This Calendar’, then copy the iframe’s src=”*”. With this URL then paste it into the the example above. See my example calendar here.
Options API Guide:
Changing the JavaScript settings to fit your needs:
- iframeName – Text String – What is the Name attribute for the Google Calendar iframe embed?
- divHolder – Text String – The Div ID attribute to write to / in
- months – Number – How many months you would like to show
- maxYear – Number – Max number of full years to show
- columns – Number – How many columns to show?
There you have it, save money and use Google Calendar for free instead of paying booking or event calendar companies to give you a full year view on your website. If you need any help developing a script for your website ask me for a free quote.
1 Comment