How to Embed Google Calendar on a Website or Blog

of 05

Getting Started - Settings

Google Calendar - Click on Calendar Settings
Screen Capture
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.

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, I'm using Blogger, so I just select the HTML tab and paste my code.

of 05

The Calendar Is Embedded

Embedded Google Calendar
Screen Capture
Ta da! 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?