figured i’d share a nice way to lay out your events to get the following improvements

1) nice looking

2) clickable links for iCal and Google Calendar

3) compatibility with hCalendar microformat (play better with google!): http://www.google.com/support/webmasters/bin/answer.py?answer=164506

you can see how Google reads your microformats here: http://www.google.com/webmasters/tools/richsnippets

test it out! 🙂

default event list format header:

<div class="events">

default event list format

<div class="vevent">

<div class="time"><div class="date"><div class="month">#M</div><div class="day">#j</div></div><b>#D</b><br/>#H:#i #A</div>



<h4><a href="#_EVENTPAGEURL" class="url summary">#_NAME</a></h4>

a type of <b class="category">#_CATEGORIES</b> at  <span class="location vcard">

<a class="fn org" href="#_EVENTPAGEURL">#_LOCATION</a>

<span class="adr">

<span class="street-address"><span class="value-title" title="#_ADDRESS"></span></span>

<span class="locality"><span class="value-title" title="#_TOWN"></span></span>

</span>

</span>

<br/><div class="description">#_EXCERPT</div><br/>

<span class="dtstart">

<span class="value-title" title="#c"></span>

</span>

</div>

default event list footer

</div>

default single event format

<div class="vevent"><p><div class="time"><div class="date"><div class="month">#M</div><div class="day">#j</div></div><b>#D</b><br/>#H:#i #A<br/><a href="#_ICALURL">iCal</a><br/>



<a target="_blank" href="

http://www.google.com/calendar/event?action=TEMPLATE

&text=#_NAME

&dates=#_{Ymd}T#H#_{i}00/#@_{Ymd}T#@H#@_{i}00

&sprop=#_EVENTPAGEURL

&location=#_ADDRESS,#_TOWN

&details=#_LOCATION.">

Google

</a>



</div><b>What:</b> <span class="category">#_CATEGORIES</span><br/>

<b>Where:</b> <span class="location vcard">

<a class="fn org" href="#_EVENTPAGEURL">#_LOCATION</a>

<span class="adr">

<span class="street-address"><span class="value-title" title="#_ADDRESS"></span></span>

<span class="locality">#_TOWN"</span></span>

</span>

</span><br/>

<b>Remaining Spaces:</b> #_AVAILABLESPACES<br/>

<div class="description">

#_NOTES

</div>

</p>

<div style="clear:both;"></div>

<p>#_MAP#_DIRECTIONS</p> #_ADDBOOKINGFORM



<span class="summary">

<span class="value-title" title="#_NAME"></span>

</span>

<span class="dtstart">

<span class="value-title" title="#c"></span>

</span>

<span class="dtend">

<span class="value-title" title="#@c"></span>

</span>

</div>

you need to add the following css (or something simimlar)

.time{

float:left;

display:block;

width:70px;

text-align:center;

margin-right:1em;

}

.date{

border:solid 1px #000;

width:60px;

margin:0 5px;

font-size:1.5em;

}

.month{

background:#000;

color:#fff;

text-transform:uppercase;

}

.day{

font-weight:bold;

line-height:2em;

}



.events img{

height:150px;

width:150px;

margin-right:1em;

float:left;

}

.vevent img.alignleft{

margin-right:1em;

}

.vevent img.alignright{

margin-left:1em;

}

thanks jpjoki for the original post

http://www.e-dynamics.be/bbpress/topic.php?id=180