Twitter: raymondcamden


Address: Lafayette, LA, USA

Displaying iCal data in PhoneGap?

10-12-2012 6,582 views Mobile, JavaScript 2 Comments

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:

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:

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.

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.

2 Comments

  • Commented on 10-12-2012 at 2:38 PM
    Thanks for the blog post Raymond! I also found another solution. If you use Yahoo Pipes, you can create a pipe of an iCal feed, and it can actually convert it into an RSS feed link!
  • Commented on 10-12-2012 at 2:38 PM
    That is damn slick. I used Yahoo Pipes a few years back and it was a cool technology, I didn't know it supported iCal parsing though. Slick.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty