Displaying iCal Data in PhoneGap?

Yesterday a reader sent the following:

Hello, my name is Josh and I have a question on a Phonegap app I will be building. They have a calendar on their website right now that has an iCal Feed. I am pretty new to iCal, but is there any tutorials you know of or tips you can give me on retrieving the iCal feed on a phonegap app using jquery mobile?? Is it even possible with javascript?

The answer is yes - it is absolutely possible to read iCal feeds with JavaScript. The only question then is how difficult the task is. The iCal format (Wikipedia Reference) is a text based format. Here is a sample:

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//216.239.0.200//NONSGML kigkonsult.se iCalcreator 2.12//
CALSCALE:GREGORIAN
METHOD:PUBLISH
X-WR-CALNAME:City of Barnesville
X-WR-CALDESC:
X-WR-TIMEZONE:America/North_Dakota/Center
BEGIN:VTIMEZONE
TZID:America/North_Dakota/Center
X-LIC-LOCATION:America/North_Dakota/Center
BEGIN:STANDARD
DTSTART:20121104T020000
TZOFFSETFROM:-0500
TZOFFSETTO:-0600
TZNAME:CST
END:STANDARD
BEGIN:DAYLIGHT
DTSTART:20130310T020000
TZOFFSETFROM:-0600
TZOFFSETTO:-0500
TZNAME:CDT
END:DAYLIGHT
END:VTIMEZONE
BEGIN:VEVENT
UID:http://www.barnesvillemn.com/~bvillemn/?post_type=ai1ec_event&p=25
 50&instance_id=
DTSTAMP:20121011T192058Z
CONTACT: (354-7198)
DESCRIPTION:
DTSTART;TZID=America/North_Dakota/Center:20121020T090000
DTEND;TZID=America/North_Dakota/Center:20121020T130000
LOCATION:
SUMMARY:St. James UCC Women’s Fall Bazaar
URL:http://www.barnesvillemn.com/~bvillemn/?ai1ec_event=st-james-ucc-womens
 -fall-bazaar&instance_id=
END:VEVENT
END:VCALENDAR

iCal uses line prefixes and groupings of event data. Getting an iCal file would be as simple as any other Ajax request. In fact, if you wanted to parse an iCal file on the same server you wouldn't need PhoneGap at all.

So given that it's plain text, you can parse it yourself or look for a library. I spent the last few hours playing around with a few libraries and the results are a bit... rough.

The first I used was ijp. This library defines an icalParser object you can pass a string to. It sets an object in the main object called ical (which implies that it isn't thread safe, so be careful) that contains events along with other data (todos, journal entries, etc). Given this simple example:

$.get("test.ics", {}, function(res,code) {
icalParser.parseIcal(res);
console.log("ijp library");
console.dir(icalParser.ical);
});

You get the following output (note the sample only had one event):

I want to point out that the date values are not parsed into date objects. You could do so yourself (here is a good StackOverflow example) but you need to decide how to handle timezones. The library does report the timezone - if any - associated with the event so that may be useful. Personally, if I see an event in some far off place and it says 6PM, I assume it's local time. I'd rather the time not be in my time zone.

The next one I looked at was JavaScript ICal Parser. It's got more of an object-oriented type API to it.

//JS-Ical-Parser one
new ical_parser("test.ics", function(cal) {
var events = cal.getEvents();
console.log("JS-ICal-Parser");
console.dir(events);
});

Unfortunately the library seemed totally confused by the date values in the sample ICS file I had. Here's the output I got:

Finally, I tried a Node package called ical. It took me a good hour to figure out how to load a Node module as a regular client-side library (not too difficult if you follow this FAQ but I wish it had been a bit more verbose). Unfortunately, its output was even wonkier:

All things being considered, the first library, ijp, seemed to be the best. You should be able to take that and display it as you wish. As I said, the only aspect of this that would only be possible in PhoneGap as opposed to a "regular" web site loaded on a mobile browser would be loading a remote ICS file.