Events Made Easy Forums Feature requests Tip: Add a Google Calendar link and hCalendar microformat support easily

Viewing 34 posts - 1 through 34 (of 34 total)
  • Author
    Posts
  • #42175
    Anonymous
    Inactive

    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.

    #45062
    Franky
    Keymaster

    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.

    #45063
    Anonymous
    Inactive

    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?

    #45064
    Franky
    Keymaster

    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

    #45065
    Franky
    Keymaster

    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 …

    #45066
    Anonymous
    Inactive

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

    #45067
    Anonymous
    Inactive

    BTW, thanks for adding this features to 3.2.3!

    #45068
    Anonymous
    Inactive

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

    #45069
    Franky
    Keymaster

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

    #45070
    Anonymous
    Inactive

    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?

    #45071
    Franky
    Keymaster

    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

    #45072
    Anonymous
    Inactive

    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?

    #45073
    Franky
    Keymaster

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

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

    #45074
    Anonymous
    Inactive

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

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

    #45075
    Anonymous
    Inactive

    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

    #45076
    Franky
    Keymaster

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

    #45077
    Anonymous
    Inactive

    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.

    #45078
    Anonymous
    Inactive

    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.

    #45079
    Franky
    Keymaster

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

    #45080
    Anonymous
    Inactive

    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)

    #45081
    Franky
    Keymaster

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

    #45082
    Anonymous
    Inactive

    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

    #45083
    Franky
    Keymaster

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

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

    #45084
    Anonymous
    Inactive

    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.

    #45085
    Franky
    Keymaster

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

    #45086
    Anonymous
    Inactive

    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.

    #45087
    Franky
    Keymaster

    The change is in trunk.

    And I found the minutes problem as well:

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

    #45088
    Anonymous
    Inactive

    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 🙂

    #45089
    Franky
    Keymaster

    I added it to the faq 🙂

    #45090
    Anonymous
    Inactive

    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

    #45091
    Franky
    Keymaster

    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.

    #45092
    Anonymous
    Inactive

    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…

    #45093
    Franky
    Keymaster

    This is a per-event thingie

    #45094
    Anonymous
    Inactive

    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

Viewing 34 posts - 1 through 34 (of 34 total)
  • The forum ‘Feature requests’ is closed to new topics and replies.
Scroll to Top