WPC wysiwyg Calendar (Part 2)

[Former Member]

In my previous blog I showed the possibility of integrating the FullCalendar jQuery plug-in to display, edit and save calendar events. In this blog I will show the possibility of extending the calendar functionality to be able to save/open an event in outlook.

The Goal:

The goal is to be able to interact with the displayed calendar events and have its save/open in outlook(and possibly other capable event organisers). Fortunately outlook supports the iCalendar format :wink: (in fact it looks like MS was quite involved in the standard!).

sample format, usually .ics file extension:

BEGIN:VCALENDAR

VERSION:2.0

PRODID:-//hacksw/handcal//NONSGML v1.0//EN

BEGIN:VEVENT

UID:uid1@somedomain.net

ORGANIZER;CN=Event Organizer:MAILTO:events@somedomain.net

DTSTART:20120510T053000

DTEND:20120510T073000

SUMMARY:Fund  raiser

LOCATION:eastern  block

END:VEVENT

END:VCALENDAR

Some Approaches and Challenges:

One approach I thought would be interesting was to generate the .ics file on the client side (purely in the browser) but I soon learnt generating a client side file to download was more challenging, for this to work I would need to use the data uri scheme 

sample csv file html download link:

<a href="data:text/csv,column1%2Ccolumn2%0Arow11%2Crow12%0Arow21%2Crow22%0A">Client generated CSV File</a>

but with browser differences and limitations, I had to think of generating the ics file download on the server side, however this too had its challenges:

The main challenge with this approach was finding a way for the browser to actually perform the download. By default, clicking on an event in FullCalendar will navigate to that events URL, it could  be scripted to navigate to the URL and perform the download at the same time but this didn't seem very clean.

Out of the box, FullCalendar doesn't provide right click context menu support, which would of been very useful and provide better interaction and in this case give the user more control of deciding whether to navigate or open the event in outlook.Luckily another excellent jQuery plug-in was available that did just that and was quite easy to get working with FullCalendar.

FullCalendar context menu integration:

the actual download is done by building the server url for generating the ics file and then changing a hidden iframe's 'src' attribute with scripting like:

var url = "/irj/servlet/prt/portal/prtroot/WPCCalendar.CalServer?"+urlParams;

document.getElementById("iframeId").src = url;

the event open in outlook: