Embedded hCalendar microformat in Calendar module

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Locked
User avatar
myshko
Forum Members
Forum Members
Posts: 102
Joined: Wed Feb 07, 2007 2:36 pm

Embedded hCalendar microformat in Calendar module

Post by myshko »

Image

UPDATE 25-06-07: There seem to be some issues in recent versions of CMSMS, please read the entire thread before implementing.

I was looking at some of the suggestions for the calendar module over at the forge and noticed an entry by stopsatgreen (Stopsatgreen's request) asking for the calendar to use the hCalendar microformat.

I use the odd microformat, especially hCard, and thought this would also be a cool addition.

NOTE: Anybody wondering what I'm talking about should look at http://microformats.org/, http://microformats.org/wiki/hcard and http://microformats.org/wiki/hcalendar to find out more.

But put simply, microformats are a way to make information you put into a webpage readable by both humans and machines.

Why would you want to do this? Well, you can markup your contact details with hCard, then people can use browser extensions / add-ons such as Operator and Tails for Firefox. You can then view and export these contacts, look them up on a map, save them or whatever.
So, as I thought this would be nice functionality, and I know Elijah is busy and already puts so much into this (as does everyone involved with CMSMS  ;) ) I thought I'd have a go.

And I managed to make a good start! This post outlines how to update the Calendar module to include the two new fields needed, 'location' and 'url' (a url for information on the event) and the user defined tag needed to embed the hCalendar.

Please note, this doesn't integrate the hCalendar into the core of the module, there are issues with this I'll explain later, it simply allows people to embed a hidden hCalendar if they wish to, which has it's own issues too.

DISCLAIMER: I'm not a developer, I just like learning new things and trying them in the spirit of things being open source. The following changes have been 'loosely' tested and could have odd results. It also requires new fields to be added to the database. This could cause problems. You should not attempt this unless you know what you are doing or are happy you can undo the changes easily. So make backups. The idea is to help out abit with the module, and open up discussion on microformats.

I'm running CMSMS version 1.0.6 and Calendar version 0.7.8. This hasn't been tried on any other versions.

--------------------------------------------------------

PART 1: Add fields to the database

We need to add two new fields to hold the information for 'location' and 'url'. I did this using phpMyAdmin as I'm a noob ;) but you could also script this.

To do this in phpMyAdmin:
1. Go to the location of phpMyAdmin from your account and login (I can just go there from cPanel)
2. Select your CMSMS databse from the dropdown menu in the top left.
3. From the tabs along the top of the screen, choose 'Structure', this will list all the tables in the database.
4. Scroll down and find the entry called 'cms_module_calendar_events', follow it's row along and click the 'structure' icon, looks like this Image.
5. The next screen shows the structure of the table. About half way down there is a row called 'Add'. Enter a '2' in the box, select the 'after' radio button and then 'event_title' from the dropdown box. Click 'GO'.
6. The next page should have two sets of rows for our new fields. Enter the following:




Field Type Length/Values Collation Attributes Null Default Extra



event_location VARCHAR 255 latin1_swedish_ci - Null NULL -



event_url VARCHAR 255 latin1_swedish_ci - Null NULL -




And click 'save'

Does that make sense? Well theres a screenshot here if it doesn't.
         
7. That's it! The new fields should appear on the next screen after 'event_title'.

--------------------------------------------------------

PART 2: Upload & Update Calendar Module files

I made changes to the following files:
  • ROOT/Modules/Calendar/function.admindisplaymanageevents.php
  • ROOT/Modules/Calendar/action.admin_add_event.php
  • ROOT/Modules/Calendar/Calendar.module.php
  • ROOT/Modules/Calendar/Lang/en_US.php
Rather than list every change, I'll just explain that I duplicated additional variables and fields for both 'event_location' and 'event_url' and updated the language file as needed. The files are attached below, you just need to remove the '.txt' from the end. You simply need to overwrite these on your server (MAKE BACKUPS FIRST!).

NOTE: I've commented all the changes in the files with a prefix of '@URMOD' so they can be searched. Theres only a handfull.

--------------------------------------------------------

PART 3: Create a user defined tag to embed your hCalendar.

To create the UDT, do the following:

1. Create a new user defined tag called 'hCalendar' or whatever you prefer.
2. Copy and paste in the following code:

Code: Select all


// hCalendar UDT v0.1 
// Created on: 25-05-07
// More info on the hCalendar format can be found at: http://microformats.org/wiki/hcalendar

// get global values and assign the template variable array 'event' to $event
global $gCms;
$event = $gCms->smarty->get_template_vars(event);

// pull the parameters from the $event array and assign to their own variables

$id = $event[event_id];
$title = $event[event_title];
$location = $event[event_location];
$url = urlencode($event[event_url]);
$summary = $event[event_summary];
$details = $event[event_details];
$event_start = $event[event_date_start];
$event_end = $event[event_date_end];

// output the hCalendar markup 
// use conditions to ensure there's no empty tags for valid XHTML

echo "<div style='display: none;' class='vevent' id='hcalendar-event-$id'>";

if($event_url != "")
	echo    "<a class='url' href='$url'>";
  
echo "<abbr class='dtstart' title='$event_start'>$event_start</abbr>";

// if $event_end is not empty, output the 'dtend' tag
if($event_end != "")
	echo    "<abbr class='dtend' title='$event_end'>$event_end</abbr>";

echo "    <span class='summary'>$title</span>— at ";

// if $location is not empty, output it's tag
if($location != "")
	echo "    <span class='location'>$location</span>";
// else output an undisclosed message
else
	echo "<span class='location'>Undisclosed</span>";

if($event_url != "")
	echo "  </a>";

// if summary is not defined, use full description ($details)
if($summary != "")
	echo "   <div class='description'>$summary</div>";
else
	echo "<div class='description'>$details</div>";

echo "</div>";

I've commented it to try and explain what it's doing so you can adapt it if needed. It just grabs all the variables from the calendar event template and builds the hCalendar markup. Conditions are put there to avoid empty spans so things are valid.

3. Save your tag
4. Add the tag to your calendar 'event template', preferably right at the bottom.
5. Save / Update your template and view the page. Tails and Operator should like up with that familiar green!

NOTE: You can also use the new fields anywhere in your templates by using '{$event.event_location}' and {$event.event_url}.

So, let me know what you think. The issues with this, as I mentioned before are:
  • The markup is embedded and hidden using css.
  • If css is disabled, the output is duplicated
  • It's longwinded, really.
  • It can only really be used in the 'event template'
You could implement this in the template, but this causes problems as the module wraps items in tags and there is also other XHTML in there. Which is why I made the UDT.

You could build this directly into the core, but this then forces users to use micoformat markup. Therefore, there would have to be a way for them to 'opt in' and choose the microformat.

Ideally, I'd like to build a 'Microformat Manager Module' which allows users to create different types of microformat, call them at will using a tag and also allow other modules to tap into them. For example, it would be really useful to be able to store hCards in the db, and just pull them out using a {microformat type="hcard" style="hidden" alias="under-radar"} kind of tag.

If anyone is up for helping with this, let me know. If I can get my head around how to build a module, and find some time, I'll have a go.

Please criticise this! Microformats are abit of a debate as to their usefulness anyway. Is there a need for this functionality, or is it still part of the fringe of web users and semantics freaks?

Thanks again to Rob Allen for his hard work on Calendar, any everyone else involved. Hope you aren't offended by me hacking your code  :o

D




[gelöscht durch Administrator]
Last edited by myshko on Mon Jun 25, 2007 9:59 pm, edited 1 time in total.
mel
Forum Members
Forum Members
Posts: 147
Joined: Mon Dec 11, 2006 11:53 pm

Re: Embedded hCalendar microformat in Calendar module

Post by mel »

Hi,
Well, well happy someone work on this!! ;D

I'm also not a programmer or specialist, I can't event not write something like this. I will try it as soon as possible, maybe this weekend and will keep in touch.
I dont know hcard, but is it similar/compatible (or eventually) with ics? (for viewing in Sunbird/Outlook)

Mel
Version 1.6-MLE
User avatar
myshko
Forum Members
Forum Members
Posts: 102
Joined: Wed Feb 07, 2007 2:36 pm

Re: Embedded hCalendar microformat in Calendar module

Post by myshko »

Hi Mel,

Glad this might be of some use. Let me know if you get chance to try out the changes, if you have any problems and how long it takes.

Yes! There are ways to make hCard and hCalendar work directly with iCal and *.ics files. I know the Operator Extension for Firefox and Mozilla exports contacts using hCard and hCalendar straight into Outlook (*.vcf), Yahoo contacts, Yahoo Calendar, iCalendar (*.ics), google calendar and 30 boxes. hCard also syncs with google maps and yahoo maps.

I'll have a proper look into it and report back anything useful in regards to CMSMS, looks like a microformat manager might be useful after all.

For now, you could take a look at the  hCard Creator and make some hCard microformats for your site.

Take it easy...

D
stopsatgreen
Power Poster
Power Poster
Posts: 322
Joined: Sat Feb 04, 2006 1:24 am

Re: Embedded hCalendar microformat in Calendar module

Post by stopsatgreen »

Wow! Great work! I can't wait to try it out.
cyberman

Re: Embedded hCalendar microformat in Calendar module

Post by cyberman »

Well done - many thanks!!!

Think, this is a important feature and should be included in News distribution.
mel
Forum Members
Forum Members
Posts: 147
Joined: Mon Dec 11, 2006 11:53 pm

Re: Embedded hCalendar microformat in Calendar module

Post by mel »

Hi,
So as promise...
I followed your explications and installed this weekend your code. I didn't test very extensively, but good news, it's seems to be fine!
First, great felicitations for clear explanations for a "zero" like me, it's was a charm, just follow instructions without any trouble.
Second, maybe it's because I dont know exactly what to do with hcard microformat, but only changes I can see are the new fields (I put them in event template as you said).
It suppose to have some icon somewhere saying "download/save as hcard"?

Anyway, for me, even if I dont have all the possibility, it's just fine like I was aking here:
http://forum.cmsmadesimple.org/index.php/topic,10520.msg52624.html#msg52624


Thanks!
Mel
Version 1.6-MLE
User avatar
myshko
Forum Members
Forum Members
Posts: 102
Joined: Wed Feb 07, 2007 2:36 pm

Re: Embedded hCalendar microformat in Calendar module

Post by myshko »

Hey Mel,

Firstly thanks loads for trying this out and letting me know it went ok.

Secondly, don't put yourself down, you're not a 'zero', we all start somewhere and you're here, trying things out, having a go and getting involved, so you're alright in my book.  ;) There's no shame in not knowing anything, the only shame lies in not finding out.

So, back to the point...

Yes, the hCalendar is embedded in the page, but hidden. If you look at the source of one of your events pages, you should see something like this in place of your {hCalendar} tag:

Code: Select all

<div style='display: none;' class='vevent' id='hcalendar-event-5'>
	<a class='url' href='http%3A%2F%2Fwww.balticmill.com%2FwhatsOn%2Fpresent%2FExhibitionDetail.php%3FexhibID%3D74'>
		<abbr class='dtstart' title='2007-05-16 00:00:00'>2007-05-16 00:00:00</abbr>
		<abbr class='dtend' title='2007-09-02 00:00:00'>2007-09-02 00:00:00</abbr>    
		<span class='summary'>Dazed and Confused vs Andy Warhol [BALTIC]</span>— at 
		<span class='location'>Baltic Centre for Contemporary Art</span>  
	</a>   
	<div class='description'>20 years after his death, the legacy of Andy Warhol lives on</div>
</div>

This is the markup for an hCalendar, called a 'vevent'. The css style 'display: none;' simply hides it from most browsers (if you disable css though, it will show up).

From the markup you can see the class of each item determines it's type, ie: url, dtstart, dtend, summary, location & description. Great, but now what do with do with this? How can we turn this simple XHTML into an iCal *.vcs file?

To do this, we use a language called XSLT which transforms XML documents into other XML documents. But don't worry, we don't need to know about that, as other smart people have done some of the work for us :)

There are three ways I can think of at the moment to get your event into a calendar.

1. Using the mozilla firefox browser, you can install the Michael Kaply's fantastic 'Operator' addon (available here). This displays a little icon when there are microformats in a page, and if you click the icon, you can choose to export it in a number of different ways, google, iCal, outlook, yahoo, 30 boxes. Great if you use Firefox, not so great if you use any other browser.

2. We can use a third party feed service to build buttons and allow people to click and convert them. Brian Suda has done great work for this and you can use his xslt files from here: suda.co.uk/projects/X2V/. But a more stable option is to use technorati's feeds from here: technorati.com/events/. We can build a button by using a simple link with a little javascript in the mix:

Code: Select all

<a class="hcalendar" href="javascript:void(location.href='http://feeds.technorati.com/events/'+escape(location.href))">Save this vEvent!</a>

Code: Select all

<a class="hcard" href="javascript:void(location.href='http://feeds.technorati.com/contacts/'+escape(location.href))">Save this persons vCard!</a>
These two links will convert any events or contacts from the page they are in! I've setup some very basic examples here:

http://www.under-radar.co.uk/microformat-examples.html

for you to try out. Just click either the 'hcalendar' or 'hcard' buttons and the microformat should be converted and saved!

So you can add a button into any page you like, no need to change anything, it works form any page with a microformat! Simply copy the event link from above, or use the examples I made. Just make sure to use the right one for an event or a contact ;)

3. We can build the generate function straight into out site using the php and xslt from microformats.org. That's why I'm gonna have a go at creating a microformat module so you can simple add the functionality to a site.

Sorry that was abit lengthy, hope it answered some of your questions and send us a link if you get it working!

D
stopsatgreen
Power Poster
Power Poster
Posts: 322
Joined: Sat Feb 04, 2006 1:24 am

Re: Embedded hCalendar microformat in Calendar module

Post by stopsatgreen »

First of all, thanks very much again for this!

Couple of small things:

1. Calendar.module.php is missing a } at the very end.

2. The date format isn't accepted by Google Calendar; when I open the event with Operator I get the message "Sorry, we cannot load this event". Your event date is in this format:

2007-06-20 23:00:00

Google Calendar works with:

20070620T23:00:00

Not sure which one is correct, but Google doesn't like the former.

I think you need the T when time is involved.

Hope this is useful.
Russ
Power Poster
Power Poster
Posts: 813
Joined: Fri Nov 25, 2005 5:02 pm

Re: Embedded hCalendar microformat in Calendar module

Post by Russ »

Plus there is of course the accessibility issues with certain 'h' elements

http://www.webstandards.org/2007/04/27/haccessibility/


Russ
Last edited by Russ on Wed Jun 20, 2007 8:43 am, edited 1 time in total.
stopsatgreen
Power Poster
Power Poster
Posts: 322
Joined: Sat Feb 04, 2006 1:24 am

Re: Embedded hCalendar microformat in Calendar module

Post by stopsatgreen »

Also, you wouldn't need the {hCalendar} step at all; the point of microformats is that they sit within the regular content, not separate from it. I made a quick change to my Upcoming Template in the Calendar module to make it microformat-able:

Code: Select all

{if $compact_view neq 1}
<h1>{$lang.upcoming_events}</h1>
{/if}
{foreach from=$events key=key item=event}
	<div class="vevent">
	<h2 class="summary"><a class="url" href="{$event.event_url}">{$event.event_title}</a></h2>

	{assign var=month_number value=$event.event_date_start|date_format:"%m"}
	{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
	{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}</div>
	{else}
	{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	<p>{$lang.date}: <abbr class="dtstart" title="{$event.event_date_start|date_format:'%Y-%m-%d'}T{$event.event_date_start|date_format:'%H:%M:%S'}">{$event.event_date_start|date_format:"%Y-%m-%d %H:%M:%S"}</abbr> {$lang.to} <abbr class="dtend" title="{$event.event_date_end|date_format:'%Y-%m-%d'}T{$event.event_date_end|date_format:'%H:%M:%S'}">{$event.event_date_end|date_format:"%H:%M:%S"}</abbr></p>
	{else}
	<p>{$lang.date}: <abbr class="dtstart" title="{$event.event_date_start|date_format:'%Y-%m-%d'}T{$event.event_date_start|date_format:'%H:%M:%S'}">{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"}</abbr> {$lang.to} <abbr class="dtend" title="{$event.event_date_end|date_format:'%Y-%m-%d'}T{$event.event_date_end|date_format:'%H:%M:%S'}">{$event.event_date_end|date_format:"%d"} {$month_names[$end_month_number]} {$event.event_date_end|date_format:"%Y %H:%M"}</abbr></p>
	{/if}
	{/if}
	{if $event.event_summary !="" && ($detail != 1 || ($event.event_details =="" ||  $event.event_details == "<br />"))}
		<div class="calendar-summary"><span class="calendar-summary-title">{$lang.summary}: </span>{$event.event_summary}</div>
	{/if}
	{if $detail == 1}
		{if $event.event_details !="" && $event.event_details != "<br />"}
		<div class="calendar-details"><span class="calendar-details-title">{$lang.details}: </span>{$event.event_details}</div>
		{/if}
	{else}
		<a href="{$event.url}">{$moretext}</a>
	{/if}
<p>At the <span class="location">{$event.event_location}</span></p>
	</div>
{/foreach}

{if $return_url != ""}
<div class="calendar-returnlink">{$return_url}</div>
{/if}
This outputs an event like so:

Code: Select all

<div class="vevent">
<h2 class="summary"><a class="url" href="http://www.sunanddoves.co.uk/film/">Dersu Uzala</a></h2>
<p>Date: <abbr class="dtstart" title="2007-06-26T20:00:00">26 June 2007</abbr>,  <abbr class="dtend" title="2007-06-26T23:00:00">20:00 to 23:00</abbr></p>
<p>At the <span class="location">Sun and Doves</span></p>
<p><a href="http://www.sunanddoves.co.uk/index.php?mact=Calendar,cntnt01,default,0&cntnt01year=2007&cntnt01month=6&cntnt01event_id=1&cntnt01display=event&cntnt01lang=en_US&cntnt01detailpage=&cntnt01return_id=57&cntnt01returnid=57">more >></a></p>
</div>
I think we should submit this whole process to the Calendar team.
stopsatgreen
Power Poster
Power Poster
Posts: 322
Joined: Sat Feb 04, 2006 1:24 am

Re: Embedded hCalendar microformat in Calendar module

Post by stopsatgreen »

Hmmm... something in this hack is causing a problem. When I try to reorder or expand/contract on the Pages menu, I get the following error:

Code: Select all

Error: the XML response that was returned from the server is invalid.
Received:

<br />
<b>Warning</b>: Cannot modify header information - headers already sent by (output started at /home/sunascou/public_html/modules/Calendar/lang/en_US.php:848) in <b>/home/sunascou/public_html/lib/xajax.inc.php</b> on line <b>678</b><br />
Followed by a load of XML. Any ideas?
User avatar
myshko
Forum Members
Forum Members
Posts: 102
Joined: Wed Feb 07, 2007 2:36 pm

Re: Embedded hCalendar microformat in Calendar module

Post by myshko »

Hi mate,

No, I've not encountered this at all.

However, my first gut feeling is maybe there's something in the latest versions of CMSMS which is causing the issue.

As the file '/home/sunascou/public_html/modules/Calendar/lang/en_US.php' seems to be triggering the cause, try re-uploading the file and checking it's ok. Also try adding the old one back in, it will simply mean some language string calls won't display.

After that, try putting the old Calendar files back, and see if the problem persists, if it does, it's most likely to be something other than the Calendar hacks made.

Let me know how things go and PM me again, we'll sort it I'm sure.

;)
User avatar
myshko
Forum Members
Forum Members
Posts: 102
Joined: Wed Feb 07, 2007 2:36 pm

Re: Embedded hCalendar microformat in Calendar module

Post by myshko »

I looked abit more mate, and I'm abit confused.

Above you displayed the error message you got, which is:
Warning: Cannot modify header information - headers already sent by (output started at /home/sunascou/public_html/modules/Calendar/lang/en_US.php:848) in /home/sunascou/public_html/lib/xajax.inc.php on line 678
But this path: '/home/sunascou/public_html/lib/xajax.inc.php' looks incorrect, shouldn't it be '/home/sunascou/public_html/lib/xajax/xajax.inc.php' ?

Still, I took a look in the file, at that line and couldn't see anything which would cause a problem, but I wouldn't know much about it anyway.

From the look of it, the xajax file is what makes the drag and drop and expand items work, which would make sense.

I really can't see why or even how the language file in the calendar module, or any of the changes made could affect this. I did a file comparison and didn't see anything odd.

If you don't have any luck I'll try a fresh install of the latest version on my server, mod the calendar module and see if the changes break anything.

M
stopsatgreen
Power Poster
Power Poster
Posts: 322
Joined: Sat Feb 04, 2006 1:24 am

Re: Embedded hCalendar microformat in Calendar module

Post by stopsatgreen »

Code: Select all

But this path: '/home/sunascou/public_html/lib/xajax.inc.php' looks incorrect, shouldn't it be '/home/sunascou/public_html/lib/xajax/xajax.inc.php' ?
Yeah, I copied it wrong!

So, I went back to the original en-US.php and the error's gone (although there's a couple of missing phrases in the module now). Definitely some conflict; perhaps in variable names?
User avatar
myshko
Forum Members
Forum Members
Posts: 102
Joined: Wed Feb 07, 2007 2:36 pm

Re: Embedded hCalendar microformat in Calendar module

Post by myshko »

Yeah,

It could be. I should have some proper time tomorrow eve. I'll have a look at the whole thing again as I have some tweaks and improvements to add. I'll see if changing the variable names to something more unique helps.

For now I'm just glad your site works!

I also know what you mean about the item being hidden in the page, I just didn't want to force the markup on people who wanted both options. I'd like to see the ability to display calendar items in any, chosen template, like with news.

Perhaps we can take it to the Calendar developers like you said and implement it abit more properly and solidly.

D
Locked

Return to “Tips and Tricks”