Tutorial: Using hCalendar Microformats 8

Okay, hopefully you now have a general understanding of what Microformats are. (Hint: If you don’t follow that last link)

Now, what can you do with them?

I’m going to walk thru a real-world example, and we’ll discuss the tools you’ll need to do so.

In this tutorial/example, you are a Denver Nuggets NBA fan, and you would like to add a few of their remaining games to your online calendar. Even if you aren’t an NBA fan, hopefully by the time we are done, you will understand how to seek out and use microformats that you are interested in.

Tools you will need:

  • Recent version of Mozilla Firefox (preferably 2.0+)
  • Google account (we’ll use Google’s online Calendar)
  • Firefox Operator Plugin (Add-on)

Okay, let’s get started: (all links will open in a new window)

  1. FirefoxDownload and install Firefox

    Follow the basic install instructions. The current version as of this article is

    Mac or Linux user? Download Firefox from here.

  2. Create a free Google accountGoogle

    If you already use Gmail or another Google service, you already have an account and can skip this step.

    Once you have your account, you can check out the Google Calendar app, but you don’t need to do anything with it yet.

  3. Add the Operator Add-on to Firefox

    The current version of Firefox needs a little assistance to make it easy to work with Microformats. There are several add-ons that help you view and interact with Microformats, but the Operator Add-On by Michael Kaply is the one I recommend. As of this writing, the latest version is 0.7.

    Click on the link, scroll down and click on the green Install Now button. Firefox will have it installed in a matter of seconds for you – restart Firefox and you are ready for the next step.

  4. Okay, you now have all the tools you need to make use of a Microformat – specifically, we are going to add the information for an upcoming event to your Google Calendar. Visit the NuggetsHoops.com Season Schedule with your Firefox browser. You’ll see the results of all games from the current NBA season. Scroll down to the bottom of the page to see the remaining games. As of this writing, there are only 5 games left, but all playoff games will also be added to this page when they are announced.
    Screenshot of Microformats at NuggetsHoops.com

    If you run across the post in the offseason, there will be new events on this same page when the next NBA season restarts in October/November.

    In the screenshot above, you will notice that I highlighted a button on the Operator toolbar that shows you that the Add-on has detected 3 Calendar events that you can add to Google Calendar, among other apps in the near future. The events are ordered from next to later, top to bottom in the pulldown that appears when you click on the button. This is the Operator Add-on at work, letting you know that it has detected Microformats on the current page and it is prepared to help you use them. Pick one of the games and left-click with your mouse. If you are currently logged into your Google Account, you will see the detail page for a new Event entry, with all of the required details already filled in. Just click “Save Changes”, and you’ve successfully used an hCalendar Microformat to create an event in your Google Calendar. Click on the Google Calendar link in the top left corner to see how it looks.

    You can now go back to the NuggetsHoops.com Season Schedule and add more events in the same way, or better yet – go explore other websites and see what other Microformat enabled websites you can find and now easily take advantage of! (Hint: The social calendar website – Upcoming.org is a great place to start!)

8 thoughts on “Tutorial: Using hCalendar Microformats

  1. Reply Chris Smaling May 2,2007 7:48 AM

    Nicely written again *and* it renders on Safari! All this integration of web applications is really cool!

  2. Pingback: Virtual Hosting Blog » Microformats University: 100+ Articles and Resources

  3. Pingback: Microformats University: 100+ Articles and Resources « WebRE: Webhosting Rss Encyclopedia

  4. Reply Phyllis Reynaldo Dec 19,2009 2:09 PM

    Great post. I got some very valuable information from it. I’ve been trying out Joomla lately and am having a great time experimenting with it. Have you used Joomla? Any tips for me? If you’d like to see my blog it’s here. Thanks again for this blog – it is really well-done.

  5. Reply col brakey Feb 18,2010 6:56 AM

    Good points raised here, (or rather, those bits I could easily read). I am afflicted with color blindness (tritanopia in my case). I mostly use Chrome browser (unsure if that matters), and a lot of this webpage has display problems for me. I don’t wish to whinge, and I know it is my problem really, nevertheless it would be great if you could take into account color blind visitors when undertaking the next site design.

  6. Reply The Guide Apr 20,2010 3:40 PM

    As a Newbie, I am always looking online for articles that can help me get further ahead.

  7. Reply vinod Jul 19,2010 12:31 AM

    Hello Alan,

    You tutorial above id pretty informative & it got me started with microformats in no time. I do however, want to ask you that if I were a non-techie user who wants to add an event from the micro formats implemented website to either Google Calender or ical, how would I do it?

    The reason why I am asking is not all users have ‘Operator’ addon installed. I want non-techie users to be able to add the events mentioned on the website to their favorite event organizers by providing them links such as ‘Add this event to Google calender’ or ‘Add this event to Ical’.

    Is this possible?
    your help is very much appreciated.

  8. Reply skierpage Mar 15,2011 10:22 PM

    The answer is for Google Calendar to support hCalendar, so users just choose Google Calendar’s Add > Add by URL, or even copy and paste the HTML into Google Calendar. Go to Google Calendar > help > forum and make a feature request for hCalendar support.

    Failing that, your web page can provide a link to the event info in .ics format. When the user clicks on it, the browser will download the .ics file and it’ll open in the associated application, which I think can be the Google Calendar web page in latest Firefox. Or the user can provide the URL of the ICS file in Google Calendar’s Add > Add by URL.

Leave a Reply




Close Bitnami banner