WPC wysiwyg Calendar (Part 2)
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 😉 (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
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:
