Dec 312011

This is the first part of a three part series on how to embed a Google Calendar into a web page and use it to accept online bookings/appointments from other online users.

The Series:

  1. Part 1: Setting up Google Calendar <- You Are Here
  2. Part 2: OAuth2 and Configuring Your ‘Application’ With Google
  3. Part 3: A Sample Web Page For Bookings

Part 1: Setting up Google Calendar to be embedded into a web page

You can already use Google Calendar on your web page for displaying your schedule. This tutorial will take you through that process quickly highlighting some of the key pieces that you will need later.

Step 1: Signup for a Google Account and Create Your Calendar

I’m going to assume you have, or know how to get a Google Account. You can get a Google Account (with your email address) here: or you can just sign up for a Gmail account, which is awesome, here:

Now, go into Google Calendar, and create a calendar that you will use for your appointments.

Give the calendar a name (1), description (2), and location (3).

Here you have the option to configure sharing (4). You will need to make the calendar public for others to see it. You can optionally choose to display only Free/Busy information to protect the privacy of the events (5).

Now, you need to grab the embed code to add the calendar to your site. You grab this by going to Calendar Settings.

Step 2: Get The Calendar Embed Code and Calendar ID

Here you will see the embed code (1), and a link to customize your output. On this page you will also see the Calendar ID (2).

This code will put an IFRAME on your page which will display your calendar. You can use the customized to tweak the look and feel of the calendar.

You will need the calendar ID for the next parts of the tutorial.

That is the end of this tutorial. You now have a calendar added to your website which will display your schedule to your web users.

Stay tuned for Part 2 of the tutorial, which will get our application set up with Google so that we can use the API to add events to the calendar.

  5 Responses to “Part 1: Setting Up Google Calendar”

  1. wow, this tutorial was fantastic. Very helpful!

  2. Really helpfull – going to part 2…

  3. Its a very good and clear walktrough, thnx

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>