Javascript-generated .ics file opens in Chrome and Firefox, but not in IE

Question

I\'m generating a .ics calendar entry from JS, next I open it using a data-URI:

window.open(\"data:text/calendar;charset=utf8,\" + escape(icsMSG));


        

Answer 1

Simplified solution could be just use the download attribute inside a link to set a filename

<a class="icon-ical" href="data:text/calendar;charset=utf8...." download='cal.ics'>iCal Calendar</a>

Answer 2

It appears there is a way to do this without using a server-side script. I answered a similar Stack Overflow question when I found this snippet that worked for me in the github issues for react-add-to-calendar:

var blob = new Blob([icsMSG], { type: 'text/calendar;charset=utf-8' });
window.navigator.msSaveOrOpenBlob(blob, 'download.ics');

This is working for me in Internet Explorer 11 without having to use a server to download the file.

Answer 3

Answering my own question:

The problem was not in the .ics output itself, rather it was in IE and Opera not treating the js-generated output as a file to download. To enforce such a download, is only possible from a server-side script.

I ended up recoding my logic to output the .ics file on the server-side, and by enforcing these headers:

header('Content-type: text/calendar; charset=utf-8');
header('Content-Disposition: attachment; filename=cal.ics');

It was a painful restructuring, but now it works across browsers.