How to Embed Google Calendar on Your Website

Add a professional-looking calendar to your site

What to Know

  • Open Google Calendar. Select the triangle next to a calendar. Choose Calendar Settings. Go to the Embed this calendar section.
  • Copy the code for the default calendar settings or change the settings first by selecting Customize the color, size, and other options.
  • Copy the HTML in the upper-right corner. Post the code into the HTML for your web page.

This article explains how to select, customize and embed a Google Calendar on your website.

How to Embed a Google Calendar on Your Website

Use the free and easy Google Calendar to manage and share a public-facing calendar on your website.

of 05

Getting Started: Settings

Google Calendar - Click on Calendar Settings

To embed a calendar, log in to Google Calendar. 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. Select Calendar Settings.

of 05

Copy the Code or Select More Options

Google Calendar Embedding

Optionally, tweak the size or color of your calendar.

Scroll down the page and you'll see the area marked Embed this calendar. Copy the code from here for a default 800-pixel-by-600-pixel calendar with Google's default color scheme.

To change these settings, select the link marked Customize the color, size, and other options.

of 05

Customizing the Look

Google Calendar Embedding

Specify the default background color to match your website, the time zone, the language, and the first day of the week. 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.

The default size is 800 by 600 pixels. That size 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.

Every time you make a change, the site displays a live preview. The HTML in the upper right corner should change, too. If it does not, select the Update HTML button.

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

of 05

Paste Your HTML

Embedding a Calendar in Blogger.

Paste the code into the relevant section of the HTML for your webpage.

of 05

The Calendar Is Embedded

Embedded Google Calendar

View your final page to display the live calendar. Any changes you make in the events on your calendar update automatically.

If it isn't quite the size or color you had in mind, 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?