create .ics file on the fly using javascript or jquery?

Question

Can someone tell me if there is any jquery plugin to dynamically create .ics file with values coming from the page div values like there would be

<div class="start-time">9:30am</div>
<div class="end-time">10:30am</div>
<div class="Location">California</div>

or javascript way to dynamically create an .ics file? I basically need to create .ics file and pull these values using javascript or jquery? and link that created ics file to "ADD TO CALENDAR" link so it gets added to outlook?

score 33 · Answer 1 · edited Aug 08 '13 at 20:40

33

you will need to make it in ICS format. also you will need to convert the date and time zone; E.G. 20120315T170000Z or yyyymmddThhmmssZ

    msgData1 = $('.start-time').text();
    msgData2 = $('.end-time').text();
    msgData3 = $('.Location').text();

    var icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//Our Company//NONSGML v1.0//EN\nBEGIN:VEVENT\nUID:me@google.com\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:me@gmail.com\nORGANIZER;CN=Me:MAILTO::me@gmail.com\nDTSTART:" + msgData1 +"\nDTEND:" + msgData2 +"\nLOCATION:" + msgData3 + "\nSUMMARY:Our Meeting Office\nEND:VEVENT\nEND:VCALENDAR";

    $('.test').click(function(){
        window.open( "data:text/calendar;charset=utf8," + escape(icsMSG));
    });

the above sample will create a ics file for download. the user will have to open it and outlock, iCal, or google calendar will do the rest.

edited Aug 08 '13 at 20:40

Brad Orego

2,976
3
18
24

answered Jan 14 '13 at 20:15

Defigo

451
4
4

2

FYI to anyone looking: as of 8/8/13 this code doesn't work. The .ics file downloads and opens but iCal says it can't read the file and errors out :/ NOTE: If you remove the spaces around " \n BEGIN:VEVENT \n" it works, but SO won't let me edit anything under 6 characters :( – Brad Orego Aug 08 '13 at 20:30
So this works in the web browser on iOS but not when it's wrapped in phonegap.. any idea how to make that work? For those that would want this in a separate question, here: http://stackoverflow.com/questions/18166561/allowing-ics-to-open-in-phonegap-app-for-ios?noredirect=1#comment26614023_18166561 – Reuben Aug 13 '13 at 21:32
1

wont work in IE and opera see [this question](https://stackoverflow.com/questions/21938890/javascript-generated-ics-file-opens-in-chrome-and-firefox-but-not-in-ie) – Bernhard Riegler Jul 04 '17 at 11:00

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

From what I have found online and on this site, it is not possible to get this to work in IE as you need to include certain headers to let IE know to download this file.

The window.open method works for Chrome and Firefox but not IE so you may need to restructure your code to use a server-side language to generate and download the ICS file.

More can be found in this question

edited May 23 '17 at 12:17

Community

1
1

answered Jul 31 '15 at 11:16

ChronixPsyc

478
1
8
22

score 1 · Answer 3 · answered Feb 04 '16 at 19:45

1

While this is an older question, I have been looking for a front-end solution as well. I recently stumbled across the ICS.js library which looks like the answer you're looking for.

answered Feb 04 '16 at 19:45

E Tarasewicz

69
7

score 1 · Answer 4 · answered Mar 25 '12 at 18:20

This is an old question, but I have some ideas that could get you started (or anyone else who needs to do a similar task).

And the JavaScript to create the file content, and open the file:

var filedata = $('.start-time, .end-time, .Location').text();
window.open( "data:text/calendar;charset=utf8," + escape( filedata ) );

Presumably you'd want to add that code to the onclick event of a form button.

I don't have Outlook handy, so I'm not sure if it will automatically recognize the filetype, but it might.

Hope this helps.

cdugga · Answer 5 · 2013-07-04T07:15:44.240

This approach worked fine however with IE8 the browser couldn't recognize the file type and refused to open as a calendar item. To get around this i had to create the code on the server side (and exposed via RESTful service) and then set the response headers as follows;

@GET
@Path("generateCalendar/{alias}/{start}/{end}")
@Produces({ "text/v-calendar" })
public Response generateCalendar(
        @QueryParam("alias") final String argAlias,
        @QueryParam("start") final String argStart,
        @QueryParam("end") final String argEnd) {
   ResponseBuilder builder = Response.ok();
   builder.header("content-disposition", "attachment;filename=calendar.ics");
   builder.entity("BEGIN:VCALENDAR\n<........insert meeting details here......>:VCALENDAR");
   return builder.build();
}

This can be served up by calling window.location on the service URL and works on Chrome, Firefox and IE8.

Hope this helps.

create .ics file on the fly using javascript or jquery?

5 Answers5

Linked