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.

Table of Contents

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:
  • cimok

    google calander very goog

  • boringest

    takes abit long to load though…

  • hafreze

    one more thing..u can also integrate the google calendar with adsense calendar..i found the post here http://adsense.blogspot.com/2006/06/make-date-with-adsense-calendar.html

  • i agree with boringtest…a bit slow lah to load

  • pinolobu

    i wonder how the localised domain works i.e. we have http://www.google.com.my but dont have http://www.google.com.my/calendar. I suppose if they have a localised server it should load faster.

    overall google calendar good, but i prefer to update my outlook calendar, then export to google calendar, because i can bring my notebook anywhere but not the internet.

    To export from google calendar to outlook calendar is impossible at this moment.

    Also, i think there’s a need to have a better synchronising feature between google calendar and outlook calendar. Meaning, i should be able to update either outlook or google calendar, and do a sync with minimal clicks. Now, it’s a one way process only, and a bit tedious.

  • LcF

    I believe Google is working on the sync feature. Sync with OS X’s iCal would be great 🙂

  • Andrew

    Super cool Liew.

    I always wanted to do this but never knew it was possible.

    I’ll try to do a flash video on this on my blog too 🙂

  • Andrew

    Ok I posted the video version of your tutorial on my blog. I used wink – an open source screen caster to do it.

  • e-tech

    very nice tut,a good way to inform people your whereabouts.especially if your on the move kinda person..maybe like a musician or something..:)

  • John Wong

    Great news and tutorial! Thanks!

  • Dunia Internet

    Is it bulky to put in the website?

  • Diana

    Looks like a cool tool.

  • I would really like to put up on my website the add events. Anyone find a good tutorial for that?

  • LcF

    @MrMan: we need to add events by log into Google Calendar.

  • There is a good tool for syncing between outlook and google calendars at http://www.syncmycal.com. It allows many-to-many two way syncs.

  • Is there a way of enabling anyone to log-in to their Google Calendar?

  • You can allow people to log in to the Google Calendar you have embedded on your website by using the Google Calendar Viewer gadget (from Google gadgets), then writing a simple wrapper around it to dynamically insert your Google Calendar email address into the javascript code in the gadget. Sweet!

  • really cool calendar tips – thanks a lot, really helped!

  • Thank You

  • I have multiple google calendars that I want to show on my blog. How to I do that? In google I can add multiple calendars and if I see events on one particular day, I see events from all the calendars on that day with different colors. This is exactly I want to do on my blog.
    Any help will be appreciated.

    Many thanks,
    Regards

  • LcF

    @Sandesh: so far, I haven’t figure out any solution to combine multiple google calendar into one and embed it to website..

  • Leow Kah Man

    Has anyone tried using the mobile service in Google Calendar?

    It lists Celcom, Digi and Maxis as supported providers.

    I am on Maxis and I cannot receive any SMS from them.

  • Josh

    Here is a way to embed multiple calendars on the site. It won’t preserve the colors, though:

    http://newwebministry.com/2007/08/03/combining-multiple-google-calendars/

  • LcF

    @Josh: thanks for your tip.

  • Julie

    Bless you! This was SO easy to follow. Thanks a bunch!

  • Looks like a cool tool but will it cause and overload or delay in site loading?

  • LcF

    @Cher: the calendar is loaded in Frame, so it won’t cause delay of your site loading speed.