How to Embed Google Calendar on Your Website

Add a professional-looking calendar to your site

By
Marziah Karch
Marziah Karch
Marziah Karch
Writer
  • Michigan State University
  • Emporia State University
Marziah Karch is a former writer for Lifewire who also excels at Serious Game Design and develops online help systems, manuals, and interactive training modules.
lifewire's editorial guidelines
Updated on February 18, 2022
Reviewed by
Jon Fisher
Jon Fisher headshot
Reviewed by Jon Fisher
  • Wichita Technical Institute
Jonathan Fisher is a CompTIA certified technologist with more than 6 years' experience writing for publications like TechNorms and Help Desk Geek.
lifewire's editorial guidelines

What to Know

  • On Google Calendar, select three dots next to a calendar > Settings and Sharing > copy Embed code.
  • Copy the code for the default calendar settings or select Customize to change the settings.
  • Copy the HTML code and paste into the HTML for your web page.

This article explains how to select, customize, and embed a Google Calendar onto your website. Instructions apply to desktops on any browser.

How to Embed a Google Calendar on Your Website

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

01
of 05

Getting Started: Settings

Google Calendar with Settings and Sharing highlighted

To embed a calendar, log in to Google Calendar. Next, go to the left panel and hover over the calendar you want to embed. Select the three dots that appear. In the expanded option box, select Settings and sharing.

02
of 05

Copy the Code or Select More Options

Google Calendar sharing settings with Embed Code and Customize highlighted

Scroll down to the Integrate Calendar section. Under Use this code to embed this calendar in a web page, copy the embed code. The default size is an 800 by 600 pixel calendar with Google's default color scheme.

Select Customize to change settings.

03
of 05

Customizing the Look

Google Calendar customization page with embed code highlighted

After selecting Customize, specify the default background color to match your website, the time zone, the language, and the first day of the week. Set the calendar default to Week, Month, or Agenda view.

Agenda view is 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; however, 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 above your calendar changes as well.

When you're satisfied with your changes, go to the top of the screen, and under Embed code, copy (Ctrl+C or Command+C) the HTML.

04
of 05

Paste Your HTML

Embed code highlighted in html web page editor

Paste (Ctrl+V or Command+V)the code into the relevant section of the HTML for your webpage.

05
of 05

The Calendar Is Embedded

Google Calendar embedded on website

View your final page to display the live calendar. Any changes you make to 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?