Events Made Easy › Forums › Feature requests › Tip: Add a Google Calendar link and hCalendar microformat support easily
Tagged: google calendar, hcalendar, subscibe
- This topic has 33 replies, 7 voices, and was last updated 13 years, 8 months ago by Anonymous.
-
AuthorPosts
-
Mon 18 Oct 2010 at 17:15 #42175AnonymousInactive
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.
Mon 18 Oct 2010 at 18:43 #45062FrankyKeymasterVery 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.
Mon 18 Oct 2010 at 19:02 #45063AnonymousInactiveYes, 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?
Mon 18 Oct 2010 at 20:26 #45064FrankyKeymasterWell … 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
Mon 18 Oct 2010 at 21:30 #45065FrankyKeymasterBtw, 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 …
Tue 19 Oct 2010 at 02:32 #45066AnonymousInactivehidden works. I was just doing this the other day when I was playing with creating my own hcard output.
Tue 19 Oct 2010 at 02:33 #45067AnonymousInactiveBTW, thanks for adding this features to 3.2.3!
Tue 19 Oct 2010 at 02:42 #45068AnonymousInactiveIs the shortcode #_ICALLINK in 3.2.3 or will it be in the next one?
Tue 19 Oct 2010 at 07:25 #45069FrankyKeymasterthe shortcode will be in the next version, the general placeholder [events_ical_link] can be used for this.
Tue 25 Jan 2011 at 21:59 #45070AnonymousInactiveI 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.
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?
Tue 25 Jan 2011 at 22:33 #45071FrankyKeymasterTry 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
Tue 25 Jan 2011 at 22:39 #45072AnonymousInactiveThanks! 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?
Tue 25 Jan 2011 at 22:44 #45073FrankyKeymasterread the section “Time placeholders” at http://www.e-dynamics.be/wordpress/?cat=25
use php date formatting (also for hour/min/sec)
Tue 25 Jan 2011 at 22:50 #45074AnonymousInactiveThanks this is what fixed it in case anyone else wants to know:
#_{Ymd}T#H#_{i}00Z/#_{Ymd}T#@H#_{i}00Z
Tue 25 Jan 2011 at 22:55 #45075AnonymousInactiveAlso 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
Tue 25 Jan 2011 at 22:59 #45076FrankyKeymasterYou can of course use the #_ICALLINK and add that to your google calendar …
Tue 25 Jan 2011 at 23:06 #45077AnonymousInactiveThanks 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.
Wed 26 Jan 2011 at 22:07 #45078AnonymousInactiveOkay 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.
Wed 26 Jan 2011 at 22:18 #45079FrankyKeymasterTry replacing the “<“,”>” tags by their html alternatives: “
& lt;
” and “& gt;
” (without the spaces)Wed 26 Jan 2011 at 22:22 #45080AnonymousInactivethis 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:
- the minutes are ignored and always come back as 00. any ideas?
- can’t add #_EXCERPT to the details. (if there is an image it parses and screws up the page)
Wed 26 Jan 2011 at 22:41 #45081FrankyKeymasterMaybe 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>;Wed 26 Jan 2011 at 22:57 #45082AnonymousInactiveThanks Franky
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
Wed 26 Jan 2011 at 23:01 #45083FrankyKeymasterWell, I never tested ESC in url’s before 🙂
But if you have an example of where #@_{Ymd} returns empty where it shouldn’t …
Wed 26 Jan 2011 at 23:07 #45084AnonymousInactivehere 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.
Wed 26 Jan 2011 at 23:15 #45085FrankyKeymasterOk, 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]));
Wed 26 Jan 2011 at 23:28 #45086AnonymousInactiveThanks 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.
Wed 26 Jan 2011 at 23:38 #45087FrankyKeymasterThe change is in trunk.
And I found the minutes problem as well:
Thu 27 Jan 2011 at 00:28 #45088AnonymousInactiveBINGO! 🙂
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 🙂
Thu 27 Jan 2011 at 08:31 #45089FrankyKeymasterI added it to the faq 🙂
Thu 27 Jan 2011 at 16:13 #45090AnonymousInactiveUse this if you want your description in the google calendar to put the link back to that events page.
Import this event to your Google Calendar
Thu 27 Jan 2011 at 19:11 #45091FrankyKeymasterIn 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.
Tue 15 Mar 2011 at 21:09 #45092AnonymousInactiveI’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…
Tue 15 Mar 2011 at 22:03 #45093FrankyKeymasterThis is a per-event thingie
Thu 24 Mar 2011 at 16:34 #45094AnonymousInactiveTo 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
-
AuthorPosts
- The forum ‘Feature requests’ is closed to new topics and replies.