Would you like the ablity to post your an easy to maintain Calendar on your own website? Google’s Calendar makes it easier than ever. In the past, creating Calendars on web pages was a pain. I’ve tried a few solutions and looked at a few more. The easy ones weren’t very good and the complex ones were a pain to work with. At least that was my experience.
If you like how the Calendar below looks and don’t mind managing the Calendar through Google, then the tutorial below is for you.
Before we can get started you will to sign up for a Google account if you don’t already have one. Once you have an account or if you already had one, you need to sign in or goto your Calendar.
Once you’ve signed into your Calendar, you must decide if you want to share your main calendar or create a second just for your website. I recommend creating a second one so you can keep personal events separate from events you want others to see. To create a second calendar, expand (if it isn’t already) the calendar list by clicking the arrow beside Calendar.
Once expanded, click the plus sign next to My Calendars (My shared Calendar has already been created, so that’s why you see “Your Shared Calendar” in the list of Calendars in the below screen shot).
You will need to fill in the details of your shared calendar. The main setting we’re concerned with here is to make sure “Share with Everyone” is set to “Share all information on this calendar with everyone”.
When prompted with “Are you sure you want to share this calendar with everyone?
Public calendars appear in Google Calendar searches.” select “Yes.”
Once you’ve hit the “Create Calendar” button, your shared calendar’s title should appear in the Calendars sidebar. The next step is to click on the little down arrow next to title of the calendar you want to share and select “Calendar Settings.”
This will take you back to the Calendar details page. On this page click on the “HTML” button in the Calendar Address section. When the dialog box appears, select the “Configuration Tool” Link.
The configuration of the Calendar is really up to you, but one thing to watch out for is the Calendar width. Make sure it will fit in the section of your site you would like to embed it in. 480 pixels wide is just right for my site. I happened to know my site’s content section is around 500 pixels wide. Several ways exist to find the width of the area you’d like to put the calendar in. Firefox has a cool plug-in called MeasureIt. You can also check your CSS file for the content div. Or you could just do trial an error. Your choice.
Once you’ve got all of the settings the way you like them, hit the “Update URL” button. All that’s left is copy and pasting the generated code into your website where you’d like the Calendar to appear. Easy as that!
I don’t imagine you’ll have any problems because I’ve attempted to make this tutorial very beginners friendly, but if you do feel free to ask questions in the comments below. You can also check out Google’s brief explanation of how to do what I explained above.
What I’ve explained is a fairly basic way to add a Google Calendar to your own site. This works great for many people who want to manage their Calendar via Google’s interface and simply display the events on a website. However, the method described above doesn’t allow you or any of your site visitors to manage the Calendar or interact with it in any way.
If you would like the ability to interact with the Calendar on your site in a way that is similar to actually logging into your Google Calendar, then you need to use the Google Calendar Data API. This requires quite a bit of programming knowledge and is beyond the scope of this tutorial. I recommend reading Google’s API documentation for help with this.
