How to mark up events in RDFa

  1. Single events

    This is literally how simple this can be. I've highlighted the words I've marked up with RDFa:

    There's a launch at Derby Museum and Art Gallery today, and I'll be doing a solo set for 1 hour until half-six. Save to calendar

    The event is contained within a paragraph, and the relevant words are marked-up to express the details of the event. To mark up events we have to use a common vocabulary of terms. The vocabulary needed is defined in an RDF file, at http://www.w3.org/2002/12/cal/ical#. Because all the terms we're going to use come from there, we can abbreviate that reference by creating an XML namespace for it called cal:

    <p prefix="cal: http://www.w3.org/2002/12/cal/ical#">

    We can now set the typeof of the paragraph as an event. The term for defining an event is at http://www.w3.org/2002/12/cal/ical#Vevent, but because we've set up a namespace we can now just write cal:Vevent.

    <p prefix:cal="http://www.w3.org/2002/12/cal/ical#" typeof="cal:Vevent">

    We want all of the information about the event to link to the event itself. We can do this by giving the paragraph an id; and then using the about property to point to the id. Yes, it's pointing to itself, but it makes sense to a computer.

    <p prefix:cal="http://www.w3.org/2002/12/cal/ical#" typeof="cal:Vevent" id="gig" about="#gig">

    We can then add each of our terms as a property. If we want the property to have a value in a specific format (e.g. dates and times must be expressed in ISO-8601) we can place them as a content attribute.

    <p prefix:cal="http://www.w3.org/2002/12/cal/ical#" typeof="cal:Vevent" id="gig" about="#gig"> 
    There's a launch at <span property="cal:location">Derby Museum and Art Gallery</span>
    <span property="cal:dtstart" content="2012-11-02T17:30:00Z">today</span>,
    and I'll be doing a <span property="cal:summary">solo set</span>
    <span property="cal:duration" content="PT1H">for 1 hour</span>
    until <span property="cal:dtend" content="2012-11-02T18:30:00Z">half-six</span>.
    </p>
    

    And that is pretty much it. If you copy the above code to the clipboard, you can extract the data and visualise it using rdfa.info.

    Extra things

    Say for example you were scheduling a meeting. Here's a plain, non-RDFa example:

    I'm meeting Roger at The Book Cafe in the Cornmarket on Friday, at six.

    Now I'll do as before, marking up the RDFa:

    I'm meeting Roger at The Book Cafe in the Cornmarket on Friday, at six. Save to calendar

    But then I need to consider - what if something changes, and this meeting is cancelled? I could simply delete it; but if I wanted to show that it had been cancelled, then we can use cal:status, and apply it as a property of the event. It can only take one of three values: CONFIRMED, CANCELLED, and TENTATIVE. You can then modify the presentation of the information on the page using CSS.

    I'm meeting Roger at The Book Cafe in the Cornmarket on Friday, at six. Save to calendar

  2. Multiple events (or single events with more extensible mark-up)

    Creating multiple events is very much like creating single ones, except this time we wrap our events in an element with typeof=cal:Vcalendar.

    Below, there are two Vevent paragraphs, and they are wrapped in a div container which has typeof=cal:Vcalendar set.

    I'm meeting Roger at The Book Cafe in the Cornmarket on Friday, at six for a couple of hours.

    Then I'll be meeting Abby outside the post office at nine.

    Save all events to calendar

    Here's the code:

    <div typeof="cal:Vcalendar" prefix:cal="http://www.w3.org/2002/12/cal/ical#">
    <p id="roger3" about="#roger3" typeof="cal:Vevent">
    I'm meeting 
    <span property="cal:summary">Roger</span> 
    at 
    <span property="cal:location">The Book Cafe in the Cornmarket</span> 
    on 
    <span property="cal:dtstart" content="2012-11-09T18:00:00Z">Friday, at six</span> 
    for <span property="cal:duration" content="PT2H">a couple of hours</span>.
    </p>
    
    <p id="abby1" about="#abby1" typeof="cal:Vevent">
    Then I'll be meeting 
    <span property="cal:summary">Abby</span> 
    <span property="cal:location">outside the post office</span> 
    <span property="cal:dtstart" content="2012-11-09T21:00:00Z">at nine</span>.
    </p>
    </div>
    

    Of course, you can also create a single event inside a calendar container.

    It's possibly more likely that a number of events will be listed: so we could put our events in a list element. Since we know that each list item is going to be an event, we can relate each list item to the term cal:Vevent, using the rel.

    • I'm meeting Roger at The Book Cafe in the Cornmarket on Friday, at six for a couple of hours.
    • Then I'll be meeting Abby outside the post office at nine.
    <div typeof="cal:Vcalendar" prefix:cal="http://www.w3.org/2002/12/cal/ical#">
    <ul rel="cal:Vevent">
    <li id="roger3" about="#roger3">
    I'm meeting 
    <span property="cal:summary">Roger</span> 
    at 
    <span property="cal:location">The Book Cafe in the Cornmarket</span> 
    on 
    <span property="cal:dtstart" content="2012-11-09T18:00:00Z">Friday, at six</span> 
    for <span property="cal:duration" content="PT2H">a couple of hours</span>.
    </li>
    
    <li id="abby1" about="#abby1">
    Then I'll be meeting 
    <span property="cal:summary">Abby</span> 
    <span property="cal:location">outside the post office</span> 
    <span property="cal:dtstart" content="2012-11-09T21:00:00Z">at nine</span>.
    </li>
    </ul>
    </div>
    
  3. Recurring events

    Recurring events have other properties. So an recurring rule would be a container within itself that would have to relate itself to the event. Let's take the following statement:

    I go running every day at five in the morning.

    Save to calendar

    We set rel=cal:rrule here. I can then contain the mass of options within this.

    <div typeof="cal:Vcalendar" class="ma-expl"
    prefix="cal: http://www.w3.org/2002/12/cal/ical#" id="run">
    <p rel="cal:Vevent">
    <span about="#run">I go 
    <span property="cal:summary">running</span> 
    <span rel="cal:rrule" property="cal:freq" content="daily">every day</span> 
    <span property="cal:dtstart" content="2012-11-03T05:00:00Z">at five in the morning</span>.
    </span>
    </p>
    </div>
    

    Recurrence can become quite complex to write - which is why you could get a machine/script to write it. But it can still be incorporated into natural language:

    <p id="tut" about="#tut" typeof="cal:vevent" prefix="cal: http://www.w3.org/2002/12/cal/ical#">
    <span property="cal:summary">The tutorial</span> will be 
    <span rel="cal:rrule">
    <span property="cal:interval" content="2">every other</span>
    <span property="cal:freq" content="weekly">week</span>
    <span property="cal:byday" content="mo,we,fr">on Mondays, Wednesdays, and Fridays</span> 
    <span property="cal:until" content="2013-05-24T00:00:00Z">until 24th May, 2013</span>
    </span>, 
    <span property="cal:dtstart" content="2012-09-03T00:00:00Z">starting from 3rd September 2012</span>. 
    </p>

    The tutorial will be every other week on Mondays, Wednesdays, and Fridays until 24 May, 2013 , starting on 3rd September 2012.

    Save to calendar