Nice looking output (loosely based on meetup.com) and hCalendar microformat

[Anonymous]

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

[Anonymous]

some improvements that would be wonderful

1. upload image separately from content so that there can be a thumbnail in event view. then have shortcode for image like #_THUMB and #_IMAGE
2. separate fields into street address, locality, and region (http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506) two new placeholders: #_LOCALITY and #_REGION…. #_TOWN would stay and simply combines #_REGION and #_LOCALITY
3. ability to run http://php.net/manual/en/function.strip-tags.php on #_DETAILS. perhaps a #_DETAILS_STRIPPED placeholder

[Franky]

I created a feature request for these.

Btw, a demo showing the result of these would be nice as well 🙂

Thanks already for this tip!

[Franky]

A question: would strip_tags be enough on #_DETAILS? I’m guessing the r and n need to be translated to url-standards?

[Anonymous]

That is a nice layout bristweb. Thanks very much for sharing.

[Anonymous]

This portion of the Default single event format code doesn’t validate, in part because end-of-line characters become space characters in the html and space characters have to be escaped in href strings and because & characters must be & a m p ; (without the spaces, bbpress won’t let me show it correctly), but also for one or more other reasons that I haven’t identified yet:

<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>

I just realized that you may have typed the ampersands in your code correctly and that bbpress changed them.

[Anonymous]

The additional validation problem is due to event name and address space characters. Spaces in href strings should be escaped as %20.

[Anonymous]

There is an additional problem with this. Event names and addresses can contain characters with accent marks and also can contain other characters that must be normalized to NFC (or escaped) in href strings. See: http://www.macchiato.com/unicode/nfc-faq

[Franky]

yeah, the whole thing needs to be url-ized. I need to create something for that later on

[Anonymous]

Another issue with the Default single event format code is that “div” tags are not allowed with “p”.

[Franky]

In trunk, I’ve added a #URL prefix similar to #ESC, so try this:

<a target=”_blank” href=”

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

&text=#URL_NAME

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

&sprop=#URL_EVENTPAGEURL

&location=#URL_ADDRESS,#URL_TOWN

&details=#URL_LOCATION”>

Google

(#URL works for the dateformatting also, but not needed there). You should now be able to add #URL_NOTES and #URL_EXCERPT as well.

[Anonymous]

awesome franky!

for me, the urls were automatically converted correctly. but perhaps that was due to something in my wordpress or due to using google chrome… but #URL is a great add!

thanks for the info admintiger… i probably should have reviewed more thoroughly but i wanted to share while it was fresh in my mind.

here are some demo screenshots:

events list – http://awesomescreenshot.com/0906kmqb7

individual event – http://awesomescreenshot.com/0d56kms3a

google reading the microdata – http://awesomescreenshot.com/0266kmv43

[Anonymous]

hi guys;

im a bit of a newbit, but i want to use this code but i dont know where to put it. In what file?

.

can anyone give me some guidance?

thanks

[Anonymous]

Go to your Events Settings. You’ll see a place to put formats for all sorts of things. There is code listed above for Events List and Single Event.

I would copy what you have there currently and save it in a text file. Then paste this in and see what happens.

[Anonymous]

where should we paste the css file?

[Franky]

See http://www.e-dynamics.be/wordpress/?cat=30

[Anonymous]

i created a file eme.css pasted the css code there

but nothing happened ….

[Anonymous]

is it recquired to use a particular theme or can we use this with any theme?

[Anonymous]

I just add the css changes to my theme’s css (actually, I always create a child theme and make all my changes there so nothing get written over).

[Anonymous]

This should be the default when you install the plugin. I think this would make a lot of people happy.

[Franky]

No css change gets overwritten at all. See http://www.e-dynamics.be/wordpress/?cat=30

[Author]

Posts