Hosting Tutorial & Guide

How to Embed Google Calendar in Your Website

updated on Jan 06, 2015
How to Embed Google Calendar in Your Website As Google Calendar is a free and excellent Google application, embedding it with your website enables you to add calendars on your web pages so that you can share important events like new product release and schedule appointments easily. If you run websites for business needs, Google Calendar is especially a good helper.

Google Calendar is highly customizable and easy-to-use. You can create multiple calendars, make some of them public, and keep others private to yourself. Also, the application sends reminders to your via email or even phone on the time that you set it up. To give a hand to beginners who are not familiar with the application, we now share the details to create, customize and embed calendars with Google Calendar.

Create a Google Calendar

Firstly, you have to go to http://www.google.com/calendar/ and login to Google Calendar with a Google account which can be used to sign into all Google services. If you do not have a valid account, simply click on the "Create an account" link and follow the steps to get a new account. Once you login to Google Calendar successfully, you are located at this page.

Google Calendar Homepage

The red button saying "CREATE" allows you to create a new event; "My calendars" includes all the available calendars created for yourself, and "Other calendars" contains the calendars for your friends and others. To create a new calendar for yourself, you need to choose "create new calendar" under "My calendars".

Create New Calendar

Add calendar details

On the new page, fill in the calendar name, description and time zone. If you check the box for "Make this calendar public", the new calendar will be visible in Google search results and to the whole world. But when you check "Share only my free/busy information", your event details won't be available for others to see. Our suggestion is to make your own plans like personal meetings and travel plans personal, and publicize the calendars with public events like product release.

In the case that you want someone else to make changes to the calendar, a coworker, for example, you can enter his/her email address, give him/her a permission as you like, and click "Add Person" get the person involved. When everything is right, you can click "Create Calendar" to make the calendar alive.

New Calendar Details

Add event details

Since you have created a calendar successfully, you now see it in the list under "My calendars". Once you have selected to display the calendar, you can choose to show it in Day, Week, Month or 4 days, which allows you to manage events more easily. For events that need little information, you can click on the scheduled time and add brief information, and for those important events, we suggest you to use the red "Create" button on the top left screen.

New Calendar Event

Calendar Event Details

Add other people's calendar

In addition to creating your own calendars, you can also add other people's calendars into your Google Calendar to get notified of your friends' or clients' agenda. To insert others' public calendars, you only need to click on the drop-arrow for "Other calendars", select "Add a friend's calendar", and fill in the friend's contact email.

Add a Friend's Calendar

Embed a Calendar into Your Website

Now that you have created a calendar, you can begin to learn how to embed it to your website to make your visitors get known about the agenda of your company. To get the job done, you have the following steps to do.

1. Click on the drop-arrow next to the calendar you want to publish on your website and choose "Calendar settings".

Calendar Settings

2. On the details page, find the "Embed This Calendar" section and click on the link for customizing and other options.

Customize Google Calendar

3. On the new screen of Google Embeddable Calendar Helper, you can customize how the calendar will be displayed. You are allowed to change the calendar title, choose the options displayed in the calendar, and change the view, size, language, background color and time zone. Multiple calendars can be chosen at one time.

Google Embeddable Calendar Helper

4. Copy the codes in the HTML window. When you make customization, the HTML updates automatically. If not, use the "Update HTML" button to give an update manually.

Google Embeddable Calendar HTML

5. Paste the codes copied before to the web page that you want the calendar to be displayed. And now the calendar is embedded successfully showing your agenda. You can make changes to the calendar at any time in Google Calendar.

For example, we created a page for new product release on our WordPress site and would like to embed a calendar containing the release time. The codes are placed like the screenshot below.

Paste Google Calendar HTML

Then we got a calendar like this.

Display Google Calendar