Add Google Calendar on Website

Google CalendarDescription: A tutorial for adding your public Google Calendar on your website.

A reader asked about how to put a calendar on her website so that her prospective clients can see if she is available for appointments.

I recommended Google Calendar because it is a free, simple, yet powerful web based calendar. Moreover, you can easily embed Google Calendar on your website.

Share your Google Calendar

Before you can add your Google Calendar on your website, you need to enable the calendar’s public access.

  1. Under “Calendars” in the left column, click on the down-arrow next to the calendar you want to make it public.
  2. Select “Share this calendar”.

    Google-Calendar-Share

  3. In the “Share with everyone” section, there are three options:
    • “Do not share with everyone”
    • “Share all information on this calendar with everyone”
    • “Share only my free / busy information (hide details)”

    Since we want to share the calendar, we can choose either “Share all information…” or “Share only free / busy information”. In this example, I use “Share only my free / busy information”.

  4. Click “Save” button to save your new setting. Now your calendar is shared.

Note: You get a Google Calendar button after sharing you calendar. We may ignore it, because we want to put calendar on our website, not a button link.

Next, we want to put the shared calendar on our website.

Get Google Calendar HTML code

Since we have already chose to shared the calendar, now we need to grab the HTML code of the Google Calendar.

  1. Under “Calendars” in the left column, click on the down-arrow next to the shared calendar.
  2. Select “Calendar settings”

    Google-Calendar-Settings-1

  3. In the “Calendar Address” section, click on the HTML button Google calendar HTML button .
  4. You get a popup message with your calendar’s public address.

    google calendar address

  5. Click on “configuration tool” link in the popup message.
  6. A new page titled “Google Embeddable Calendar Helper” is opened. From there, you may choose your calendar options such as calendar title, controls, size, and background color.
  7. Calendar’s HTML code is given under the calendar options. On the bottom of the page is the preview of your calendar.
  8. Copy and paste the HTML code into your website. You’re done!

Example of Google Calendar embedded on website:

My two cents

Website calendars are good to inform your visitors about your current events. Google Calendar is very suitable for this purpose. I hope you find this tutorial helpful.

By the way, you may contact me to request for a “How-to” tutorial.

calendar, google, howto, html, tip, tutorial, website

Share this:
READ ALSO:  8 Awesome Tools That Will Help Your Freelancing Business

You may also interested:

27 Comments

  1. cimok June 19, 2006
  2. boringest June 19, 2006
  3. hafreze June 19, 2006
  4. Pinvader June 20, 2006
  5. pinolobu June 20, 2006
  6. LcF June 20, 2006
  7. Andrew June 20, 2006
  8. Andrew June 20, 2006
  9. e-tech June 20, 2006
  10. John Wong June 20, 2006
  11. Dunia Internet September 16, 2006
  12. Diana October 5, 2006
  13. MrMan November 26, 2006
  14. LcF November 26, 2006
  15. Vaibhav December 23, 2006
  16. Neil March 29, 2007
  17. Movies & Music March 29, 2007
  18. Sanjay M April 15, 2007
  19. Alex April 26, 2007
  20. Sandesh August 24, 2007
  21. LcF August 25, 2007
  22. Leow Kah Man August 31, 2007
  23. Josh September 3, 2007
  24. LcF September 3, 2007
  25. Julie September 8, 2007
  26. Cher May 12, 2008
  27. LcF May 13, 2008

Leave a Reply