Creating microformat hCalendar events with PHP 8

I’ve run an NBA fansite called NuggetsHoops.com since 1995. With equal passions for the Denver Nuggets and web design, I’ve poured a lot of time and effort into the website. Every month, there are more and more “blogs” dedicated to the Denver Nuggets, as their popularity has grown over the past few seasons with the additions of NBA superstars Carmelo Anthony and Allen Iverson to the roster. So, partly to be different, and partly to create interesting web development challenges, I usually focus my fansite on fun features that provide Nuggets fans with information presented in unique and hopefully useful ways.

One of those features is a fairly standard Schedule & Results page that shows how the Nugget fared in every game of the season, along with the remaining games on the season’s schedule. What makes it currently unique is the fact that each remaining game on the schedule is an hCalendar Microformat. A future article will show you exactly how you can take advantage of this feature, but for now, I will assume you know how to utilize Microformats, and you are here to see how to create them as a web developer.

For this example, we are going to access a MySQL database with information about remaining games, then use PHP code to dynamically display it. At the same time we are outputting the dynamic schedule information, we are going to add the very useful hCalendar microformat. The purpose of this article is not to teach you PHP, MySQL, or even CSS – the focus here is a real world example that you can add microformat markup to.

First, let’s perform some date logic to get the current date, then compare it with dates in a schedule database table to get the remaining games for the current season.

'".
$cmpDate."'";
$result=db_query($sql);
?>

Now we have a list of rows to iterate over and display. This example is already in the middle of an HTML table, so we’re just going to create new tr tags for each remaining game.
';
echo ' ' . strtoupper($month) . '

';
echo ' OPPONENT

';
echo '

TIME (MT)

';
echo ' LOCAL TV

';
echo '

';
echo ' NAT TV

';
echo ' NOTES

';
echo '

';
}
?>

Let’s gather info about the current game for display to the webpage, and for the hCalendar microformat.
';
else
$hdTVimage = '';
?>

Now its time to create each remaining row in the schedule – and finally we get to create an hCalendar microformat. First, I’ll show you the code, without the hCalendar markup, for comparison.
';
echo ' ' . $gameDate . '

';
echo ' ' . $eventInfo . $opponent . '

';
echo ' ' . $gameTime . '

';
echo ' '. $row['lbroadcast'].'

';
echo ' '.$hdTVimage.'

';
echo '

';
echo ' '. $row['broadcast'] . '

';
echo ' ' .$eventLocation . '

';
echo '

';
} // End while
?>

Pretty basic HTML, displaying our game information dynamically using PHP.

Finally, we’ll walk thru the microformat version. We start by creating a new row with the required class value of vevent. To give the event a name we use the summary class in a span element. Notice that I put a portion of the information within an abbr tag with the class of “mhide”. With CSS, I hide anything within an element using the mhide class from human eyes. I’ve recently read that the latest theory is to not hide any microformat information, because it looks like trickery to search engines like Google, and they may ding your page ranking for it. At this point, I’m not going to worry about that – I’d rather have a combination of usefulness and style – I want my microformat to provide event information without displaying more details than I need on the actual webpage. There may be a better way to handle this issue in the future, so I just wanted anyone following thru this example to be aware.
' . $gameDate . '

';
echo ' ' . $eventInfo . '' . $opponent . '

';

Now back to our partially defined microformat – so far we just have declared that we have an event and we’ve given it a title. Next, we’ll define the event’s start time and end time, which are the dtstart and dtend classes. We’ll display the start time and hide the end time since I don’t want to display that on the webpage. The abbr element has a useful title property where we will put the special date/time format that the microformat requires. (i.e. March 30th, 2007 at 8:00 MT is formatted as “2007-03-30T20:00-07:00”. The -07:00 provides the timezone information because it is the offset from Universal Time for the Mountain timezone) Then the part we want to display simply goes within the abbr element itself.

echo ' ' . $gameTime . '' . $gameEnd . '

';
echo ' '. $row['lbroadcast'].' '.$hdTVimage.'

';
echo ' '. $row['broadcast'].'

';

The last property of the hCalendar microformat that I will make use of in this example is location. Then, once the tr element is closed, the hCalendar implementation is completed.

echo ' '.$eventLocation.'

';
echo '

';
// End hCalendar Microformat
} // End while
?>

There you have it. Embedded hCalendar events for each game, that are both human and machine readable, output as valid HTML.

If you found this useful and would like me to make the source code available for download, just leave a comment.

8 thoughts on “Creating microformat hCalendar events with PHP

  1. Reply Carrie Mar 29,2007 12:29 PM

    This is way cool! Great code! Hope you don’t mind if I borrow some of it!

  2. Reply alan Apr 5,2007 10:31 AM

    A question came up about the date/time format in the example, so I added more detail to clarify that the -07:00 at the end provides timezone information.

  3. Reply Chris Apr 5,2007 11:01 PM

    Great article and nicely written. Perhaps a description of what hCalendar is would be nice though.. to set the scene. Shame it doesn’t render correctly under Safari.

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

  5. Reply kim May 14,2008 3:26 AM

    To understand the importance of microformats, one should look at this 30 min presentation on Google Video. Great prez:

    http://video.google.com/videoplay?docid=4912491017216716477

    And the nice cheat sheet:
    http://suda.co.uk/projects/microformats/cheatsheet/

  6. Reply jrosell Apr 2,2009 2:41 AM

    For lazy people like me… Where’s mysql code?

  7. Reply kouta Aug 19,2010 5:20 AM

    good tutorial, 10x

Leave a Reply

%d bloggers like this: