How to Add a Calendar to a Website | Website Creator

by on October 20, 2011 · 15 comments

Do you like this blog post?

how to add google calendar to website

Many of our users at IconoSites want to know how to add a calendar to a website (e.g. event calendar, appointment calendar, etc.).  So, here’s a simple tutorial on how to embed a Google Calendar into your IconoSites website, utilizing both the calendar you have made with Google and the website you have built with our 100% free website creator.

Video Tutorial

If you prefer to watch a video tutorial, here it is
(otherwise, continue with the written tutorial below):

Written Tutorial

1.  Before you start embedding the calendar, please login to your Google account. Go here to login

2.  Once you’ve logged in to Google Calendar, please click the arrow down button beside your calendars. See screenshot below.

3.  Select and click the Calendar Settings. Please see screen shot below.

add google calendar to your website

4.  Next is to scroll down a little bit and find Embed This Calendar section. Note that the default calendar size is way too big to embed into your web page. You may want to resize it. Click on Customize the Color, size, and other options. Please see screen shot below.

add google calendar to your website

5.  Once you’re done customizing your calendar, please copy the code. To do so, highlight, then right click, then select copy. You will use this code to be embedded to your IconoSites Web page. Please see screenshot below.

6.  Next, Login to your IconoSites account.

7.  Next, click Web Pages button found at the left side of the dashboard. Please see screenshot below.

add google calendar to your website

8.  Then click Edit link to the specific page you would like to embed the calendar.  Please see screenshot below.

add google calendar to your website

9.  Next, scroll down and go to Your Page Content section. Please see screenshot below.

add calendar to your website

10.  Next, click on the little HTML link tool to open the HTML editor. Please see screenshot below.

add calendar to website

11.  Next, paste the code that you’ve just copied from your Google Calendar. In this example, Google Calendar is place below the welcome content of the page.

add google calendar to website

12.  Click the Update button.

13.  Click the Save and Exit button. That’s it, you’re done. Congratulations! You’ve just embedded Google Calendar into your IconoSites small business website.

How to Create a Website in Minutes, Free!

Like what you see? SIGN UP FOR ICONOSITES and Create a Website in Minutes with our Free Website Builder.

  • Denis

    I’ve used this free website creator and I’ve also created my
    own calendar. I can tell you, this is not difficult at all. You should all try

    • Bob Charles

      Thanks Denis, We’d tried to make it as easy as possible!

  • Gene

    This is not at all hard to do. I’ve simply followed your
    steps and it was very easy. This is how I did with my website too. I used that
    free website creator following certain steps and I succeeded.

    • Bob Charles

      Glad it was easy Gene.  

  • Frank

    I’ve never used a free website builder. Is it hard? As I can
    see in this tutorial, adding a calendar is not hard at all.

    • Bob Charles

      We have tons of tutorial videos and walk-throughs just like this one, for how to create your website using IconoSites.  Our goal is to make it as easy as possible.  Give it a try, and you’ll see!!

  • Gertude

    These instructions are very helpful. After you created your
    own website with that free website creator, if you want to add a calendar, you
    should really follow these instructions. They show very well what you must do,
    step by step.

    • Bob Charles

      Thanks Gertrude!

  • Dinamite

    This tutorial is for those with no
    programming knowledge. The free website creator is the same. If you are at the beginning,
    you would succeed following these steps  

    • Bob Charles

      You’re exactly right.  No technical knowledge required to use the free website builder or to add something like a google calendar.  We’ve designed this software to be as easy as possible.

  • Barney

    So basically this uses your website maker to integrat google calendar?

    • Bob Charles

      Yes, this shows you how to add a calendar to your website, using the IconoSites web site maker.

  • Stan

    So what makes this different from just using any other website builder, eh?

    • Bob Charles

      First, the IconoSites web site builder delivers stunning design quality, unrivaled by any other web site builder.  Second, its extremely easy to use, even if you don’t have a technical background.  Website building has never been easier!

  • Ashamla

    I have tried this multiple times using different browsers but there is no UPDATE button at the bottom of the screen!!

Previous post:

Next post: