How to Embed Google Calendar on a Website or Blog

Does your club, band, team, company, or family website need a professional looking calendar? Why not use the free and easy Google Calendar. You can share responsibility for editing events and embed your live calendar on your website to let everyone know about upcoming events.

of 05

Getting Started - Settings

Google Calendar - Click on Calendar Settings
Screen Capture

To embed a calendar, open up Google Calendar and log in. Next, go to the left-hand side and click on the little triangle next to the calendar you want to embed. You'll see an option box expand. Click on Calendar Settings.

of 05

Copy the Code or Select More Options

Google Calendar Embedding
Screen Capture

If you are happy with Google's default settings, you can skip the next step. However, in most cases, you'll want to tweak the size or color of your calendar.

Scroll down the page and you'll see the area marked Embed this calendar. You can copy the code from here for a default 800x600 pixel calendar with Google's default color scheme.

If you want to change these settings, click on the link marked Customize the color, size, and other options.

of 05

Customizing the Look

Google Calendar Embedding
Screen Capture

This screen should open in a new window after you click on the customize link.

You can specify the default background color to match your website, the time zone, the language, and the first day of the week. You can set the calendar to default to week or agenda views, which might be useful for something like a cafeteria menu or team project schedule. You can also specify which elements show up on your calendar, like the title, print icon, or navigation buttons.

Most importantly for websites and blogs, you can specify the size. The default size is 800x600 pixels. That is fine for a ​full-size Web page with nothing else on it. If you're adding your calendar to a blog or Web page with other items, you'll need to adjust the size.

Notice that every time you make a change, you see a live preview. The HTML in the upper right corner should change, too. If it does not, press the Update HTML button.

Once you're satisfied with your changes, select and copy the HTML in the upper right corner.

of 05

Paste Your HTML

Embedding a Calendar in Blogger.
Screen Capture

I'm pasting this into a Blogger blog, but you can paste it into any Web page that allows you to embed objects. If you can embed a YouTube video on the page, you shouldn't have a problem.

Make sure you are pasting it into the HTML of your Web page or blog, otherwise it won't work. In this case, in Blogger, just select the HTML tab and paste the code.

of 05

The Calendar Is Embedded

Embedded Google Calendar
Screen Capture

View your final page. This is a live calendar. Any changes you make in the events on your calendar will be updated automatically.

If it isn't quite the size or color you had in mind, you can go back to Google Calendar and adjust the settings, but you'll have to copy and paste the HTML code again. In this case, you're changing the way the calendar appears on your page, not the events.

Was this page helpful?