Listing events on a day planner

Listing events on a day planner

I'm trying to achieve something similar to Google Calendar with the
following look:

I'm not really sure how to do the rowspan, or how to handle overlapping
events. I'm currently drawing the table as follows:
<table id="calendar-day">
<thead></thead>
<tfoot></tfoot>
<tbody>
<?php
$hour = 0;
while ($hour < 24) {
// alternate row colors
echo $hour % 2 ? '<tr class="altbg">' : '<tr>';
echo '<td class="time" rowspan="2">';
echo '<p>';
if ($hour == 0) {
printf("%d:00 %s", 12, 'AM');
} elseif ($hour < 12) {
printf("%d:00 %s", $hour, 'AM');
} elseif ($hour == 12) {
printf("%d:00 %s", $hour, 'PM');
} else {
printf("%d:00 %s", $hour - 12, 'PM');
}
echo '</p>';
echo '</td><td><p>&#160;</p></td>';
echo '</tr><tr>';
echo $hour % 2 ? '<td class="altbg"><p>&#160;</p></td>' :
'<td><p>&#160;</p></td>';
echo '</tr>';
$hour += 1;
}
unset($hour);
?>
</tbody>
</table>
And the data for each event can basically be stored however I want it,
such as the following array:
Array
(
[events] => Array
(
[2] => Array
(
[title] => test 1
[start_time] => 9:00 AM
[end_time] => 12:30 PM
)
[7] => Array
(
[title] => test 2
[start_time] => 12:00 PM
[end_time] => 13:15 PM
)
[8] => Array
(
[title] => test 3
[start_time] => 14:00 PM
[end_time] => 23:45 PM
)
)
)
How can I traverse such an array to get a result similar to the image above?