google calendar site exemple
You were searching for "google calendar site exemple". These posts might be of interest:
- No related posts.
Add Google Calendar on Website
Filed in: Google, Tips n Tricks, Web Development — June 19th, 2006
Description: 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.
- Under “Calendars” in the left column, click on the down-arrow next to the calendar you want to make it public.
- Select “Share this calendar”.

- 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”.
- 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.
- Under “Calendars” in the left column, click on the down-arrow next to the shared calendar.
- Select “Calendar settings”
- In the “Calendar Address” section, click on the HTML button
. - You get a popup message with your calendar’s public address.
- Click on “configuration tool” link in the popup message.
- 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.
- Calendar’s HTML code is given under the calendar options. On the bottom of the page is the preview of your calendar.
- 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.
Comments Feed
TrackBack URL


June 19th, 2006 at 4:34 pm
google calander very goog
June 19th, 2006 at 4:36 pm
takes abit long to load though…
June 19th, 2006 at 8:18 pm
[...] LiewCF has a good tutorial on how to add your public Google Calendar on your Website. [...]
June 19th, 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
June 20th, 2006 at 1:15 am
i agree with boringtest…a bit slow lah to load
June 20th, 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.
June 20th, 2006 at 12:01 pm
I believe Google is working on the sync feature. Sync with OS X’s iCal would be great
June 20th, 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
June 20th, 2006 at 4:56 pm
[...] LiewCF.com came out with an interesting tutorial on how to place or embed Google Calendar onto a webpage. [...]
June 20th, 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.
June 20th, 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..:)
June 20th, 2006 at 6:53 pm
Great news and tutorial! Thanks!
August 14th, 2006 at 5:09 pm
[...] Link ke tutorial : http://www.liewcf.com/blog/archives/2006/06/add-google-calendar-on-website/ [...]
September 16th, 2006 at 7:47 am
Is it bulky to put in the website?
October 5th, 2006 at 7:46 am
Looks like a cool tool.
November 26th, 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?
November 26th, 2006 at 12:55 pm
@MrMan: we need to add events by log into Google Calendar.
December 23rd, 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.
February 8th, 2007 at 3:48 pm
[...] With Google in the walled garden, you can also show your own calendar of events from within the captive portal. First, get the Calendar HTML code you need; explained here. Next, pick the embedded portal page to insert the calendar into. Below, we place the HTML into the Login Page template. [...]
March 19th, 2007 at 8:36 am
[...] Add Google Calendar on Website [...]
March 29th, 2007 at 7:30 pm
Is there a way of enabling anyone to log-in to their Google Calendar?
March 29th, 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!
April 15th, 2007 at 4:01 pm
really cool calendar tips - thanks a lot, really helped!
April 26th, 2007 at 9:35 am
Thank You
August 24th, 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
August 25th, 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..
August 31st, 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.
September 3rd, 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/
September 3rd, 2007 at 3:39 pm
@Josh: thanks for your tip.
September 8th, 2007 at 4:45 pm
Bless you! This was SO easy to follow. Thanks a bunch!
May 12th, 2008 at 6:32 pm
Looks like a cool tool but will it cause and overload or delay in site loading?
May 13th, 2008 at 3:43 am
@Cher: the calendar is loaded in Frame, so it won’t cause delay of your site loading speed.