my recent reads..


Blogarhythm: Top Jimmy - Mean Street (covering Van Halen)
read more and comment..

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:

PRODID:-//AddToCal Example//EN
DTSTART:<%= @event.start_time.rfc3339 %>
DTEND:<%= @event.end_time.rfc3339 %>
LOCATION:<%= event_url( @event ) %>
DTSTAMP:<%= %>
DESCRIPTION:<%= event_url( @event ) %>\n<%= @event.full_title %>
SUMMARY:<%= @event.synopsis %>

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

To support vCalendar, we also implement views/events/show.vcs.erb

PRODID:-//AddToCal Example//EN
SUMMARY:<%= @event.full_title %>
DTSTART:<%= @event.start_time.rfc3339 %>
DTEND:<%= @event.end_time.rfc3339 %>
URL:<%= event_url( @event ) %>
DESCRIPTION;ENCODING=QUOTED-PRINTABLE:<%= event_url( @event ) %> =0A<%= @event.synopsis %>

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

=> "2010-07-20T15:00:00.333Z"

=> "20100720T150000.333Z"

=> "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..