How to integrate Google Calendar into your website

This article explains how to select, customize and integrate a Google calendar on your website. The instructions apply to desktop computers, regardless of the browser used.

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

Getting Started: Settings

To integrate a calendar, connect to Google Calendar. Then go to the left panel and hover over the calendar you want to embed. Select the three dots that appear. In the expanded options box, select Settings and Sharing.


Copy the code or select other options

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 the settings.

Appearance Customization

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

The Agenda view is useful for things like the cafeteria menu or a team project calendar.

You can also specify what displays on your calendar, such as the title, print icon, or navigation buttons.

The default size is 800 by 600 pixels. This size is perfect for a full-size web page with no other elements. However, if you add your calendar to a blog or webpage with other elements, you will need to adjust the size.

Every time you make a change, the site shows a live preview. The HTML code above your calendar also changes.

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

Paste your HTML

Paste (Ctrl+V or Command+V) the code into the appropriate section of your web page’s HTML.

The calendar is integrated

View your final page to view the live schedule. Any changes you make to your calendar events are updated automatically.

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

Leave a Comment