Add to Calendar with a jQuery Widget
If you deal with any kind of event-based information on your websites, you would probably really like an easy way of letting users add it to their calendar.
Unlike link sharing—where there are some great drop-in solutions like AddToAny and AddThis—calendar integration unfortunately remains a bit rough around the edges. Varying standards with varying degrees of adoption; consideration for desktop and web-based calendar clients; and the complicating factor of timezones make it all a bit harder than it really should be.
AddToCal is a jQuery UI Widget that I put together to help me solve the problem and do things like you see in the screen clip on the right. It's freely shared and available on github.
Using it on a web page is as simple as including the js links, binding it to the DOM elements or classes on your page that contain "events", and provide an implementation of the getEventDetails method that knows how to extract the event details from your particular DOM structure.
The example also demonstrates how to use AddToCal in conjunction with the hCalendar microformat for event notation (try it out here).
I've currently included support for the web-based calendars by Google, Yahoo!, and Microsoft Live. If you can serve iCal or vCalendar format event links then AddToCal also links to 30boxes and iCal/vCalendar desktop software—including the iPad Calendar application;-)
Serving iCal and vCalendar links
What about iCal and vCalendar formats? These are complicated a little because we need a URL to the respective iCal and vCalendar format resources .. so we need to be able to serve them before AddToCal can link to them.
Thankfully, this can be relatively trivial once you get a handle on the file formats. Here's an example of how to implement with Ruby on Rails.
Say we have an Events controller and associated Event model that represents an activity people may like to add to their calendars. A simple iCal implementation with ERB means creating a views/events/show.ics.erb along these lines:
BEGIN:VCALENDAR
PRODID:-//AddToCal Example//EN
VERSION:2.0
METHOD:PUBLISH
BEGIN:VEVENT
DTSTART:<%= @event.start_time.rfc3339 %>
DTEND:<%= @event.end_time.rfc3339 %>
LOCATION:<%= event_url( @event ) %>
SEQUENCE:0
UID:
DTSTAMP:<%= Time.zone.now.rfc3339 %>
DESCRIPTION:<%= event_url( @event ) %>\n<%= @event.full_title %>
SUMMARY:<%= @event.synopsis %>
PRIORITY:5
CLASS:PUBLIC
END:VEVENT
END:VCALENDAR
Sharp eyes will note the unusual rfc3339 helper method I've provided to make it easy to get date/times in RFC3339 format as required by the iCal and vCal standards. You could extend Time::DATE_FORMATS, but here I've simply added the method to ActiveSupport::TimeWithZone
class ActiveSupport::TimeWithZone
def rfc3339
utc.strftime("%Y%m%dT%H%M%SZ")
end
end
To support vCalendar, we also implement views/events/show.vcs.erb
BEGIN:VCALENDAR
PRODID:-//AddToCal Example//EN
VERSION:1.0
BEGIN:VEVENT
SUMMARY:<%= @event.full_title %>
PRIORITY:0
CATEGORIES:SHOW
CLASS:PUBLIC
DTSTART:<%= @event.start_time.rfc3339 %>
DTEND:<%= @event.end_time.rfc3339 %>
URL:<%= event_url( @event ) %>
DESCRIPTION;ENCODING=QUOTED-PRINTABLE:<%= event_url( @event ) %> =0A<%= @event.synopsis %>
LOCATION;ENCODING=QUOTED-PRINTABLE:<%= event_url( @event ) %>
END:VEVENT
END:VCALENDAR
Depending on your Rails version and web server, you may have to teach it about these MIME types e.g. add to config/initializers/mime_types.rb:
Mime::Type.register "application/hbs-vcs, text/calendar, text/x-vcalendar", :vcs
Blogarhythm: Remember - Jimi Hendrix
read more and comment..
12 Things Every Programmer Should Know
Samnang Chhun posted his neat little presentation from BarCamp Phnom Penh 2010. It's a good summary of the leading memes of the moment..
Blogarhythm: everybody wants the same thing - scissor sisters
read more and comment..
RFC 3339 / ISO 8601 dates in javascript
Many server-side languages (e.g. Ruby and Python JSON encoders) and encoding formats like ATOM send dates in RFC 3339 / ISO 8601 format. The standard Javascript Date object cannot parse these values, which can make client-side scripting involving dates a pain.
There have been snippets of code floating around the net for ages, and various libraries that include necessary support. rfc3339date.js is my attempt at rolling the best into an standalone, unobtrusive, and open-sourced Date extension that plays well with other libraries that also extend the Date class.
It lets you do things like:
var d = Date.parse( "2010-07-20T15:00:00.333Z" );
d.toRFC3339UTCString();
=> "2010-07-20T15:00:00.333Z"
d.toRFC3339UTCString(true);
=> "20100720T150000.333Z"
d.toRFC3339LocaleString(true);
=> "20100720T230000.333+0800" // assuming current timezone is GMT+8
The readme in the project repository on github has more information about the range of date formats supported and other methods available.
Blogarhythm: Too Many Times - Mental as Anything
read more and comment..
Shinjuku Pit Inn
10th July 2010: Jazz has been huge in Japan since whenever, but unless you go searching, it's easy to miss the fact that Tokyo has a thumping great live scene. Sites like tokyojazzsite.com are great for getting around the language barrier.
So, it's Saturday afternoon and we're looking for a place to chill so we jump on a train to Shinjuku sanchōme and by my very rough guide we manage to find the Shinjuku Pit Inn. As is always the case with food and music, it's a basement venue.
I had no idea who we might get to see, but we were very lucky to catch a 5 piece outfit who played a 3 hour set through the afternoon (sunglasses definitely required when we emerged back onto the street in the early evening).
This was trad jazz at it's most enthusiastic and dedicated best. Who else would be playing in a dingy, smoke-filled basement on a Saturday afternoon instead of out shopping or lazing the weekend away?
And being in the audience is a serious business - the rows of desks are at once a reminder of a stricter scholastic past and yet a wonderful setting to prop up you G&T, smoke if you please, and just get lost in the music.
The ¥2500 cover charge (including drink) is not bad. I only wish I had discovered this place when I was working in Japan. I can't think of a better way of relaxing on a Saturday afternoon.
Blogarhythm: Relax, take it easy - Mika: Live In Cartoon Motion
NB: I am retro-blogging Tokyo which is why this post is a little delayed
read more and comment..
