Tuesday, April 10, 2007
This week, we look at two easy ways to slap a dynamic calendar into your site. Two of the leading free calendar services are covered: Google Calendar and 30Boxes.
First, we'll look at Google Calendar. Anyone who has a GMail account already has a Google Calendar account. You can access your Google Calendar, and create a new account if necessary, at http://calendar.google.com.
Once you've logged in and created your calendar, you'll be able see your own events, and any other shared events you add. You can add all kinds of events to your calendar using the Search Public Calendars box. In this example, we'll add the Boston Red Sox schedule to our calendar, and then display that calendar in EditMe.
First, we'll find the Red Sox MLB calendar by typing "Boston Red Sox MLB" into the Search Public Calendars box. This is the box on the lower left under "Calendars" - not the Event search at the top. Click the "Add Calendar" button next to the first search result. Once we've added the calendar to our Google Calendar, it will appear in in the Calendars box on the left along with our personal calendar.
Next to the "Boston Red Sox MLB" listing in the Calendars sidebar box is a dropdown menu button. Click this to display the menu for this calendar and select "Calendar Settings". Then click the blue HTML button next to Calendar Address. In the pop-up that appears, click the Configuration Tool link. Here you can use the form to design how you want your included calendar to look.
When you've got it looking the way you want on your site, copy the HTML in the large text box and fire up your EditMe site. Since this code uses an IFRAME tag, we can't just paste it into any old page. Instead, we'll create a special page to house this code, and then include that page in a normal page.
Log into your site and click the "New" link in your Tools menu. We'll enter "RedSoxCalendar" for the page name, and be sure to select "HTML Source Editor" as the Editor Mode. Click Submit to proceed to the editor page, and then paste your Google Calendar code into the editor. You now have a page displaying the Red Sox calendar on your site. You can include this page in any other page by simply entering [[include:RedSoxCalendar]] into the editor.
Of course, you can include any calendar in your site. For example, you can create a public calendar at Google and allow others to submit events into it. Here it is:
30Boxes is another free web calendar service. If you don't have an account already, just go to http://30boxes.com and click Sign Up on the home page. The process is quick. Once you've got your calendar up and running, add a few events. Adding the calendar to EditMe is easy.
In the upper left corner, click the Share button and select "Add to Blog". Copy the text in the "Embed Calendar" box and fire up your EditMe site.
The instructions from here are the same as they were for Google Calendar. Log into your site and click the "New" link in your Tools menu. We'll enter "RedSox30Boxes" for the page name, and be sure to select "HTML Source Editor" as the Editor Mode. Click Submit to proceed to the editor page, and then paste your 30Boxes code into the editor. You now have a page displaying your 30Boxes calendar on your site. You can include this page in any other page by simply entering [[include:RedSox30Boxes]] into the editor.
Here our example calendar. As you can see, we've added the Red Sox feed to our 30Boxes calendar (it's not as easy as it was with Google Calendar, but it's still fairly simple).
