How to Add a Calendar to a Website

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 www.google.com/calendar


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.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk