website builder cheat sheet

Choose the best website builder for your business

The Cheat Sheet that shows you exactly which website builder to choose based on your needs with bonus on how to get free custom domain, free email hosting, and more.

Get the FREE cheat sheet
website builder cheat sheet

How to add Google Calendar in Weebly

By David Nge • Last Updated: January 25, 2023

My work is supported by affiliate commissions. Learn More

Here's a step-by-step tutorial on how to add Google Calendar on your Weebly site.

We'll go over:

By the end of this tutorial, you will be able to add an interactive Google Calendar on your site where visitors can view and interact with your calendar events.

They can even save your event on their own Google Calendars.

Let's dive right in.

Getting embed code from Google Calendar

To start, we need to retrieve the embed code from Google Calendar.

First, login to your Google Calendar.

Then click on the settings icon (⚙️) and click Settings.

Head to Google Calendar settings page
Head to Google Calendar settings page

Look for Settings for my calendars in the sidebar.

Head to one of your Calendar's settings and make sure the access permission for public is checked.

Make your calendar accessible to public
Make your calendar accessible to public

Now head to Integrate Calendar to locate the embed code.

Head to Integrate calendar to get the embed code
Head to Integrate calendar to get the embed code

You will be redirected to the Integrate Calendar settings section. Click Customise.

You can customize how your Google Calendar will look
You can customize how your Google Calendar will look

A new window will open with a preview of your calendar.

If you know some basic HTML/CSS you can customize the how your calendar will look when it's embedded on your website — Customizing the width and height, background color, border thinked and color, etc.

If you're content with the default Google Calendar view, then click on the copy icon to copy the embed code.

Copy the Google Calendar embed code
Copy the Google Calendar embed code

Make sure you don't lose this code. You can also paste it in a note editor in case you lose it.

Now let's head to Weebly to add the Google Calendar code.

Add Google Calendar in Weebly

Login to your Weebly account. Make sure you select the correct website and click Edit Site.

Select the right Weebly site to edit
Select the right Weebly site to edit

In the main editor, drag and drop the Embed Code element to your site.

Drag and drop the embed code element to your page
Drag and drop the embed code element to your page

Select Click to set Custom HTML ➞ Edit Custom HTML.

Edit the embed code HTML
Edit the embed code HTML

Paste the Google Calendar code (that you copied earlier) into the text field.

Paste the Google calendar code into the text field

Click Publish to live the calendar.

Publish your Google Calendar Live on your Weebly site
Publish your Google Calendar Live on your Weebly site

That's it! You've now added an interactive Google Calendar on your Weebly site.

Getting an error?

If you're seeing an error message "The server cannot process the request because it is malformed. It should not be retried", there's a good chance you did not make your calendar public.

Head to your calendar settings and make sure the calendar permission for public is checked.

Make sure your Google Calendar is available to the public
Make sure your Google Calendar is available to the public

David Nge

David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.

Have a tutorial you want to learn? Leave a suggestion here.