Search
Clear search
Close search
Google apps
Main menu

Add a Google calendar to your website

You can add an interactive version of your calendar to your website, and add buttons for your website visitors to save your calendar events. 

Step 1: Embed a calendar on your website

  1. On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the Google Calendar app. 
  2. In the top right, click Settings Settings and then Settings.
  3. Click the Calendars tab.
  4. Click the name of the calendar you want to embed.
  5. In the "Embed This Calendar" section, copy the iframe code displayed.
  6. Open your website editor, then paste this code where you want the calendar to display.

Your embedded calendar will only be visible to people you've shared it with. To allow all visitors to see your calendar, you'll need to make it public.

Step 2: Customize your embedded calendar

  1. On a computer, open Google Calendar. You can only customize your embedded calendar from a computer, not the mobile app. 
  2. In the top right, click Settings Settings and then Settings.
  3. Click the Calendars tab.
  4. Click the name of the calendar you want to embed.
  5. In the "Embed This Calendar" section, click Customize the color, size, and other options.
  6. Choose your options, then copy the HTML code displayed.
  7. Open your website editor, then paste this code where you want the calendar to display.

Let site visitors save a calendar event

You can add a Google Calendar button to your website so visitors can quickly save your event on their own Google Calendars. To let anyone to save your calendar event, you'll need to make your calendar public.

  1. On a computer, open Google Calendar. You can only make changes to your calendar visibility from a computer, not the mobile app.
  2. Open an event on your public calendar, then find the "Visibility" section.
  3. Click Publish event.
  4. In the Publish event window, copy the HTML code displayed.
  5. Open your website editor, then paste this code where you want the event button to display.

Aaron is a Calendar expert and author of this help page. Leave him feedback below about the page.

Was this article helpful?
How can we improve it?