Embedding a Google Calendar

One of the nice features that Gmail has is Google Calendar. With Google Calendar it is easy to book appointments, create recurring appointments, and even share the calendar with others. But one nice trick that you can do with a Google Calendar is to embed it into a website. So say for example you would like to have an Events calendar on your website, but don’t want to spend all the time remembering to update it. By embedding a Google Calendar in your website you can accomplish the same thing without having to update the website, just update the Google Calendar and you are done. So let’s take a look at setting one up.

First we need to login to your Gmail account and go into Calendars. Now we will want to create a secondary calendar for you to embed on your website, as you probably don’t want to use your personal one to display for all of the public. To create a secondary calender, just click the arrow to expand My Calendars. Then click the arrow on the right hand side to bring down the pull down menu and select, Create new Calendar. This will bring up a new page asking for a name, just give it the name Events or something similar, and then hit the Create Calendar button near the top.

Now that the calendar is created, we need to next make it viewable by the public. To do this we need to click on the Cog icon in the top right hand corner and select Settings. Then click on the Calendars link near the top, this will display a listing of all your calendars. In the list find the Events calendar we just created, and select Shared:Edit Settings for that calendar. Check the box to Make this calendar public, then underneath that make sure to not check Share only my free/busy information. Once that is done you can click Save. You will then get a Warning verifying you want to make this calendar public, select Yes.

So now we have the calendar created, and it is shared so the public can view it, but the next step is to get the code to embed in our website. To do that we once again click on the Cog in the right hand corner in Calendars, then select Settings, and then the Calendars link at the top. In the listing find the Events calendar, and this time click on the name itself. This will bring up the Calendar Details page, if you scroll down you will find a section called Embed This Calender and it will have some code in a box. We don’t want to grab that code yet as this is a great time to customize the look of our calendar before we embed it. If you look just above the code box, you will see a link for Customize the color, size, and other options. Click on that link and this will take you to a page where you can edit the layout and look of your calendar.

By default it is set to month view, which is good if you want to display the whole month, personally I prefer the Agenda view as it lists your events and doesn’t show a lot of white space, making it seem as you are less busy than you really are. It also makes it really easy to see your events at a glance without having to dig through a calendar. If you would also prefer this, on the left change the Default View to Agenda. I also typically change the width of the calendar as well so it will fit on the website a little better. Usually I find a width of 500-600 pixels works the best, so go ahead and adjust the Width pixels. If there are any other options you want to try go ahead and do them now, you will see a preview of what your calendar will look like as you change them. Once you have the calendar looking the way you want, click on the Update HMTL button at the top to make sure we have the correct code. Then highlight all the text in the box near the top, make sure to go from <iframe> to </iframe>.

Now that we have our Events calendar website code, it is time to put it on our website. Depending what format you use for your website, such as CSS, Joomla, or WordPress the next steps may differ, but basically all you need to do is create an Events page on your website if you don’t already have one and paste the code in there. And that’s it, now you have a nice embedded Google Calendar right in your website, and you can do all the updating right from your Gmail account.