Tip: Add a Google Calendar link and hCalendar microformat support easily

[Anonymous]

Hi,

It’s very easy to add a Google Calendar export link and hCalendar support to an event’s page just by changing EME’s settings.

Exporting an event to Google Calendar is done by a link, so it’s easy to construct a link with the proper syntax in EME’s admin panel:

Here’s info on the link construction from Google:

http://www.google.com/googlecalendar/event_publisher_guide_detail.html

Below is an example with the mandatory parameters and then some, and with EME placeholders. I myself have the following link displayed in Default single event format:

<a target="_blank" href="

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

&text=#_NAME

&dates=#Y#m#dT#H#i00Z/#Y#m#dT#H#i00Z

&sprop=#_EVENTPAGEURL

&location=#_ADDRESS,#_TOWN

&details=#_LOCATION.">

Import event to Google Calendar

</a>

Clicking the link will add the event to the user’s Google Calendar.

It’s just as easy to add hCalendar support.

Some general info on hCalendar:

http://microformats.org/wiki/hcalendar

Basically, it’s one way of embedding information into a webpage. For example, if you use Firefox and have the Operator plugin installed, you can see instantly if a web page has any hCalendar events in it and then export the event info to wherever.

Here’s how to add hCalendar support to an existing HTML markup:

http://microformats.org/wiki/hcalendar-authoring#Adding_hCalendar_markup_to_existing_content

Below is again an example from my setup of Default single event format. I’ve wrapped the whole thing into a div with the class vevent, which is a minimum requirement.

Then I’ve wrapped the relevant fields with spans with classnames like summary, url, dtstart, location, description, and so on. I’ve hidden some of the content with a class called hidden, which just sets the display property into none.

This way the extra markup doesn’t change how the content below looks like, but with an hCalendar compatible device the event data can easily be exported.

<div class="vevent">

<span class=" hidden summary">#_NAME (#_CATEGORIES)</span>

<a href="#_EVENTPAGEURL" class="url"></a>

<p class="basic_info">

<abbr title="#Y-#m-#d #H:#i" class="dtstart">#j.#n.#Y klo #H.#i</abbr>,

<span class="location">#_LOCATION</span>

</p>

<span class="description">#_NOTES</span>

<p>

<span class="adr">

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

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

</span>

</p>

</div>

So it’s a piece of cake to build the markup you need just with EME’s settings.

[Franky]

Very interesting, maybe I’ll add these as options as well!

But, things can get simple: I’ve added ICAL support to the latest released version, should help you subscribe to your events calendar in any ICAL capable soft. But the “add to google” is nice, as is the hcalendar thingie.

[Anonymous]

Yes, I just noticed that – after I’d just done my own iCal hack 🙂 The iCal addition is very good and important, thank you for that. As it currently produces a file with all events, do you have any plans to make a single event version of it?

As Google Calendar and hCalendar support can be build quite easily by users themselves, the ICAL support is more important. In my current project I intend to offer the user the possibility for all of them, as people have different calendars and habits. Also Google has started to index hCalendar events from webpages as well, so that’s one incentive to use the microformat.

BTW, I struggled with this one as I got familiar with the iCalendar format: As I imported events, the times were always three hours more as they should have been. I finally managed to find out that the Z at the end of dtstart and dtend fields means that the time always defaults to UTC. As I am in UTC+3 timezone, all calendars added three hours to the event’s times. Removing the Z helped, so this could be something that could be added as an option in the future?

[Franky]

Well … timezones are going to be difficult to add, apparently there’s no timezone info for a user, so it’s quite useless. But I’ll leave out the “Z”, so it becomes localtime, and people just need to do the math themselves (for now) 🙂

Edit: I created a shortcode #_ICALLINK to be used for a single event

[Franky]

Btw, for the hcalendar thingie: if I add a CSS class hidden to

<div class="vevent">

would it still work? I could then just hide this div and always include it …

[Anonymous]

hidden works. I was just doing this the other day when I was playing with creating my own hcard output.

[Anonymous]

BTW, thanks for adding this features to 3.2.3!

[Anonymous]

Is the shortcode #_ICALLINK in 3.2.3 or will it be in the next one?

[Franky]

the shortcode will be in the next version, the general placeholder [events_ical_link] can be used for this.

[Anonymous]

I am trying to add the add event for google calendar. I have used the code snippet listed previously to add the link in my events. You can see it here:

http://miyceramics.com/blog/events/?calendar_day=2011-01-28

Every single time it generates the date it puts #dT:

201101#dT130000Z

should be

20110128T130000Z

Below is a copy of the link generated with teh #dT.

http://www.google.com/calendar/event?action=TEMPLATE&text=test&dates=201101#dT130000Z/201101#dT130000Z&sprop=http://miyceramics.com/blog/events/?event_id=89&location=723%20S%2021%20Ave,Hollywood,%20fl&details=MIY%20Ceramics%20and%20Glass%20Studio.

Please note I put the code at the top of “Default single event format” configuration in the settings page.

Could this be caused by me version of PHP?

[Franky]

Try this for the dates line:

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

==> read the section “Time placeholders” at http://www.e-dynamics.be/wordpress/?cat=25

[Anonymous]

Thanks! That worked. Is there a way I can generate the event start time and end time as part of that line of code? As it exists right now it just generates the event as starting at 8am and ending at 8am?

[Franky]

read the section “Time placeholders” at http://www.e-dynamics.be/wordpress/?cat=25

use php date formatting (also for hour/min/sec)

[Anonymous]

Thanks this is what fixed it in case anyone else wants to know:

#_{Ymd}T#H#_{i}00Z/#_{Ymd}T#@H#_{i}00Z

[Anonymous]

Also I am in eastern time, but google calendar keeps getting the hours mixed up so I removed the Z at the end and that fixed it so now at least when it goes to add the even it adds it my time zone:

#_{Ymd}T#H#_{i}00/#_{Ymd}T#@H#_{i}00

[Franky]

You can of course use the #_ICALLINK and add that to your google calendar …

[Anonymous]

Thanks I had tried that previously, but I wanted a real time update so that as soon as I have a new event I can add it to my google calendar from my website (and anyone else for that matter), rather than having to download them and import them to google calendar.

[Anonymous]

Okay I just had a brain storm. even if I can’t get the full details on my google calendar because of the formatting I can still direct people back to my events pages from the google calendar using the shortcode #_EVENTPAGEURL.

Now there is one problem the link is not active in google so people would have to copy and paste, and being that most of my customers are lazy, that is just too much work in this day and age. I found that if you put this code:

<a href="http://website.com">Link to this page</a>;

Into the details of the string sent to google it would put the link in the code. Here’s the but, EME will interprete the HTML and put it directly on your events page instead of just transfer the text on to google. Is there some kind of code or maybe do some kind / trick to get eme to not interpret the HTML in that instance?

Thanks for you great help, and quick responses! I sent a small donation today, and will contribute more in the future.

[Franky]

Try replacing the “<“,”>” tags by their html alternatives: “& lt;” and “& gt;” (without the spaces)

[Anonymous]

this code will let your visitors subscribe to the ical feed in their google calendar:

<a href="http://www.google.com/url?sa=D&q=http://www.google.com/calendar/render%3Fcid%3D[events_ical_link justurl=true]">Google Calendar</a>;

kudos to jpjoki for this post. and thanks to miyceramics for the correction

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

however this is incorrect. if i’m understanding correctly, the way it is above, it would show the correct end HOUR, but the DATE and MINUTES would NOT be correct. the second set for time should be:

#@_{Ymd}T#@H#@_{i}00

however, that actually doesn’t parse correctly all the time. sometimes #@_{Ymd} returns correctly, sometimes it comes back empty. not sure why. @franky??

two other issues i’m having:

1. the minutes are ignored and always come back as 00. any ideas?
2. can’t add #_EXCERPT to the details. (if there is an image it parses and screws up the page)

[Franky]

Maybe even better (use the #ESC notation to escape (remove the n and r and escape all quotes) the values:

<a target="_blank" href="

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

&text=#ESC_NAME

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

&sprop=#ESC_EVENTPAGEURL

&location=#ESC_ADDRESS,#ESC_TOWN

&details=At #ESC_LOCATION. #ESC_EXCERPT">

Google</a>;

[Anonymous]

Thanks Franky

please re-read i edited some

also #ESC_EXCERPT seems to also have problems when trying to encode to url. it appears wordpress automatically encodes the url properly if there aren’t errors in the &dates field. so it appears there is no way to add the excerpt to the details

[Franky]

Well, I never tested ESC in url’s before 🙂

But if you have an example of where #@_{Ymd} returns empty where it shouldn’t …

[Anonymous]

here is an example

http://www.crossfitlodo.com/event/?event_id=5

currently set the code to use this:

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

you’ll see in the url the time looks something like this:

20110320T110000/T1500

so the end date and minutes are returning empty. the minutes are coming back correctly and the 00 for seconds are appended at the end…

however this one is working correctly

http://www.crossfitlodo.com/event/?event_id=4

also it seems $_{i} always returns 00 and $@_{i} returns either 00 or null.

[Franky]

Ok, got that one: when using curly brackets and the end date equals the start date, the end date is replace by an empty string. This is old behaviour and causes trouble. Now that we have conditional tags, people can use those if they want.

So just replace these lines in events-manager.php (starting around line 1115):

if( $date == "event_end_date" && $event[$date] == $event['event_start_date'] ) {

$replacement = '';

} else {

$replacement = date_i18n(substr($result, $offset, (strlen($result)-($offset+1)) ), strtotime($event[$date]));

}

by just

$replacement = date_i18n(substr($result, $offset, (strlen($result)-($offset+1)) ), strtotime($event[$date]));

[Anonymous]

Thanks Franky!

would that change come in the next update? if i’m going to hack the code i don’t want it to be lost upon update.

also any idea on the minutes?

it seems $_{i} always returns 00 and $@_{i} returns either 00 or null.

[Franky]

The change is in trunk.

And I found the minutes problem as well:

http://plugins.trac.wordpress.org/changeset/337639

[Anonymous]

BINGO! 🙂

so in summary, the following is the correct way to output to google calendar:

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

current version (3.3.0 and earlier) following hack is required for it to work: http://plugins.trac.wordpress.org/changeset/337639

it appears that hack corrects both issues regarding the minutes.

now on to getting the hCalendar microformats looking good 🙂

[Franky]

I added it to the faq 🙂

[Anonymous]

Use this if you want your description in the google calendar to put the link back to that events page.

Link to this page“>

Import this event to your Google Calendar

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

I’m really eager to implement the ability for users to subscribe to events via google calendar. Will the instructions given in this thread create a subscription to all events (events that I add in the future), or just one specific event? That’s the only thing I’m confused about…

[Franky]

This is a per-event thingie

[Anonymous]

To subscribe to events via google calendar – so that users can get new events you add or get changes, you can right now: create a google calendar. Use the already built-in placeholders to add the event to the google calendar yourself. (by viewing the list of events and clicking each “add to google calendar link”) If you change an event, you’ll have to re-add it to the google calendar manually and then actually go to the google calendar to delete the old one. And you’ll have to do the deletions manually in the google calendar.

You could do an ical link for the whole calendar, but it only updates once a day or so. That may be OK for you.

This wasn’t acceptable to me; I needed real time updates. So I’m working on writing a Google Calendar interface. I’ve got it basically working, but still needs error checking and it doesn’t work with recurrent events at all yet.

/Wendy

[Author]

Posts