CODEWITHSUNDEEP
javascriptjqueryicalendar
joshuahornby10
joshuahornby10

Reputation: 4302

Create .ics file with javascript or jquery

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:[email protected]\nDTSTAMP:20120315T170000Z\nATTENDEE;CN=My Self ;RSVP=TRUE:MAILTO:[email protected]\nORGANIZER;CN=Me:MAILTO::[email protected]\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.

Upvotes: 31

Views: 95279

Answers (6)

Jan
Jan

Reputation: 49

Here is a good example on Codepen, created by vivien. Basically this function:

function convertDate(date) {
  var event = new Date(date).toISOString();
  event = event.split("T")[0];
  event = event.split("-");
  event = event.join("");
  return event;
}
function makeIcsFile(date, summary, description) {
  var test =
    "BEGIN:VCALENDAR\n" +
    "CALSCALE:GREGORIAN\n" +
    "METHOD:PUBLISH\n" +
    "PRODID:-//Test Cal//EN\n" +
    "VERSION:2.0\n" +
    "BEGIN:VEVENT\n" +
    "UID:test-1\n" +
    "DTSTART;VALUE=DATE:" +
    convertDate(date.start) +
    "\n" +
    "DTEND;VALUE=DATE:" +
    convertDate(date.end) +
    "\n" +
    "SUMMARY:" +
    summary +
    "\n" +
    "DESCRIPTION:" +
    description +
    "\n" +
    "END:VEVENT\n" +
    "END:VCALENDAR";

  var data = new File([test], { type: "text/plain" });

  // If we are replacing a previously generated file we need to
  // manually revoke the object URL to avoid memory leaks.
  if (icsFile !== null) {
    window.URL.revokeObjectURL(icsFile);
  }

  icsFile = window.URL.createObjectURL(data);

  return icsFile;
}

Upvotes: -1

Andri
Andri

Reputation: 573

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

Upvotes: 2

InsanelyADHD
InsanelyADHD

Reputation: 548

There is an open source project for this:

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:

Upvotes: 10

machinateur
machinateur

Reputation: 500

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.

Upvotes: 0

smartbart24
smartbart24

Reputation: 524

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.

Upvotes: 29

Arnaud Quillaud
Arnaud Quillaud

Reputation: 4635

You have two colon for the organizer address: "MAILTO::[email protected]"

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.

Upvotes: 4

Related Questions