Create .ics file with javascript or jquery

Question

I am trying to create an .ics file when a user clicks a button.

So far the code I have is

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";

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

This downloads a .ics file but when I try to open this in iCal I am told it can not read the file.

What are the values of start-time, end-time, and Location you're using? — AlliterativeAlice, Oct 02 '13 at 14:59
In the end I used http://addthisevent.com/ A very good and simple plugin. — joshuahornby10, Oct 04 '13 at 11:51

score 27 · Answer 1 · answered Nov 08 '14 at 14:55

27

I used the ics.js solution mentioned by InsanelyADHD.

One problem with the solution was that Chrome did not detect the filetype correctly and tried to open the file as text with the editor.

I changed the download function to open the text simply with:

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

My fork on Github is icsFormatter.js

Regarding the license: I have contacted the original author to include a GPL - after that I will include one too.

answered Nov 08 '14 at 14:55

smartbart24

504
4
4

1

you should probably specify what calendar is. My guess is, it's the result of isc().download('name') ? – Per Hornshøj-Schierbeck Feb 20 '15 at 10:47
@smartbart24 Does your fork work on iOS? That was an issue with the original one. – user2030942 Jan 16 '19 at 22:27
Has the `ical.js` chrome issue been fixed? `icsFormatter.js` is no longer maintained? #2022 – Terrabits Sep 22 '22 at 21:09

score 10 · Answer 2 · edited Jun 12 '18 at 04:26

10

There is an open source project for this:

ics.js

It's 100% JavaScript and worked on all modern browsers except for IE 9 and below.

If you are interested in how they get the files working, you can check their source. They use the following libraries to perform the heavy lifting:

edited Jun 12 '18 at 04:26

Philipp Hanes

107
5

answered Oct 11 '13 at 18:43

InsanelyADHD

548
5
11

3

Since there is no license definded its per default All Rights Reserved. Opened an issue for that. – Mx. Aug 18 '14 at 12:37
2

@InsanelyADHD this ics.js also doesn't support 6 > safari version. – Muhammad Saifuddin Oct 22 '15 at 17:06
5

The original edition is not well maintained and contains critical flaws. The fork is strong in this one. Use the fork. https://github.com/connorbode/ics.js – starlocke Nov 17 '15 at 03:23
1

@starlocke Is correct, the original version hardly worked. The question has been updated to point to the same version he commented above – Jack Franzen Sep 26 '16 at 06:05
2

I've edited this answer to point to https://github.com/nwcell/ics.js which appears to be the original and now-maintained version – Philipp Hanes Jun 11 '18 at 21:14

score 4 · Answer 3 · edited Oct 07 '21 at 05:57

You have two colon for the organizer address: "MAILTO::me@gmail.com"

If this does not solve the issue, you will have to show us the full ical stream, as it is received by iCal.

Finally, and assuming that start_time and end_time are using the correct format, for the location field, you may need to wrap lines (https://www.rfc-editor.org/rfc/rfc5545#section-3.1) and escape certain characters (https://www.rfc-editor.org/rfc/rfc5545#section-3.3.11). In other words, you may want to look at iCalendar libraries.

score 2 · Answer 4 · answered Aug 12 '19 at 11:02

2

ics.js didn't work for me since i was loading the data asynchronously from my database. I then switched to ical.js combined with the saveAs function from ics.js and it worked. If anyone here is having the same issues, feel free to text me then i will provide an example

answered Aug 12 '19 at 11:02

Andri

553
4
20

Hi, I am trying to use ics.js and it works fine but the savings part in which some browsers do not save the file while Android system is not catching it so it can not display the choose app menu to select Calendar. I am using FileSaver.js for that. Is there any way to download the file instead of saving it. I think that if the ics file is downloaded the Android will be able to display the choose app menu to add the ics to the Calendar app. Am I wrong on this assumption? – SIMBIOSIS surl Aug 06 '21 at 00:55

score 0 · Answer 5 · answered Mar 21 '15 at 13:49

0

I used icsFormatter which was mentioned and by smartbart24. But I was required to support IE down to version 7, so I had to tweak things a little.

To use icsGen, my fork of icsFormatter, you have to have php 4 or 5 installed on your webserver.

answered Mar 21 '15 at 13:49

machinateur

502
5
10

Create .ics file with javascript or jquery

5 Answers5