How to easily embed a Google Calendar to your Drive hosted HTML using iframes

by +Cesar Anton 

@reicek
Google Drive Developer Expert

Embedding a calendar on your webpage or web-app it's quite fast and easy thanks to Google's Calendar i-frame creator. And you can even decide who has access to the Calendar, this allows you to share a calendar inside a webpage with your friends, family, co-workers  etc. without worrying about some other people finding your website and looking at the calendar.

	First create a calendar at http://calendar.google.com using the "Quick add" option, you can find it next to the label CREATE at the left of the page. Only assign a name to the calendar you are going to share, and click "Add".
Now find your calendar in the "My Calendars" tab, click the small icon at the right of the name of the calendar you've just created and finally click on the "Share this Calendar" option.
	Now it's time to decide if you are going to make the Calendar "Public" or to only "Share with specific people". Be careful when using the "Public" setting since anyone with access to the i-frame address will be able to see it. If you choose to "Share with specific people" you must enter the Gmail address of the people you wish to grant access to the calendar, in this case it's necessary to use a browser already logged into one of the authorized Google Accounts.
In this same page we also need to check the "Permission Settings" here you can individually choose the permissions of the people that you gave access the calendar, usually one uses "See all event details". The "See only free/busy (hide details)" option it's useful when you only want to share if there is space available on that period or not, without giving details about the events stored in the calendar. This is very useful for administering your agenda with your clients.
	Now go to the "Calendar Details" tab, here you can check the "Name" once again and also you can setup a "Description" of the calendar along with the "Location", setting up the description and location of a calendar it's optional, so you can leave them blank if you don't require them. In the "Auto-accept invitations" tag you can decide if the calendar should add requests automatically from other users or not, "Auto-accept invitations that do not conflict" it's the most common one, it will allow people to add new events as long as they're not at the same time with a previously added one. Once you are done with the settings, find the "Embed This Calendar" tag, here you can find a Default iframe, but I suggest to click on the "Customize the colour,  size, and other options" legend to create a custom iframe tag for your HTML code.
This is where you personalize the calendar inside the iframe to match your needs and style. You can set a "Calendar Title" to show in your iframe (this is independent of the name of the calendar and it's only a text frame to optionally draw on top of your calendar), there are many other options you can play with in the "Show" check list, personally I prefer to unselect all the options to give the calendar a more stylish look, this becomes a necessity in at a resolution of  300 x 300 or lower, you can set-up any resolution you see fit, usually 150 x 150 it's the minimum for a month calendar to display properly with all the "Show" options disabled. Once you are done customizing your iframe, copy the HTML inside your page, remember you can host it for free with you Google Drive account.

This is the HTML code we got for our example iframe and it's ready to add it to your own webpage or webapp inside an iframe tag:

src="https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=400&wkst=2&bgcolor=%23FFFFFF&src=fh28avieusq7r47mbm5lskimgk%40group.calendar.google.com&color=%235229A3&ctz=America%2FMexico_City" style=" border-width:0 " width="400" height="400" frameborder="0" scrolling="no"

Here you can see it in action:



Feel free to post your ideas, suggestions, requests, etc at the bottom of this article.

Happy coding!