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

        
                      

              相关标签:
       
      

Answer 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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.