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.

 

Connect with LiewCF

Enter your email address to receive free updates. Find LiewCF on Twitter, Facebook, and Google+

32 Responses to Add Google Calendar on Website

  1. cimok June 19, 2006 at 4:34 pm #

    google calander very goog

  2. boringest June 19, 2006 at 4:36 pm #

    takes abit long to load though…

  3. hafreze June 19, 2006 at 9:31 pm #

    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

  4. Pinvader June 20, 2006 at 1:15 am #

    i agree with boringtest…a bit slow lah to load

  5. pinolobu June 20, 2006 at 11:24 am #

    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.

  6. LcF June 20, 2006 at 12:01 pm #

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

  7. Andrew June 20, 2006 at 4:29 pm #

    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 :)

  8. Andrew June 20, 2006 at 5:15 pm #

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

  9. e-tech June 20, 2006 at 5:41 pm #

    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..:)

  10. John Wong June 20, 2006 at 6:53 pm #

    Great news and tutorial! Thanks!

  11. Dunia Internet September 16, 2006 at 7:47 am #

    Is it bulky to put in the website?

  12. Diana October 5, 2006 at 7:46 am #

    Looks like a cool tool.

  13. MrMan November 26, 2006 at 6:14 am #

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

  14. LcF November 26, 2006 at 12:55 pm #

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

  15. Vaibhav December 23, 2006 at 5:47 pm #

    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.

  16. Neil March 29, 2007 at 7:30 pm #

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

  17. Movies & Music March 29, 2007 at 7:33 pm #

    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!

  18. Sanjay M April 15, 2007 at 4:01 pm #

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

  19. Alex April 26, 2007 at 9:35 am #

    Thank You

  20. Sandesh August 24, 2007 at 5:54 pm #

    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

  21. LcF August 25, 2007 at 1:57 am #

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

  22. Leow Kah Man August 31, 2007 at 11:37 pm #

    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.

  23. Josh September 3, 2007 at 7:19 am #

    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/

  24. LcF September 3, 2007 at 3:39 pm #

    @Josh: thanks for your tip.

  25. Julie September 8, 2007 at 4:45 pm #

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

  26. Cher May 12, 2008 at 6:32 pm #

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

  27. LcF May 13, 2008 at 3:43 am #

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

Add a comment