Search code examples
javascripticalendar

How to generate working .ics file from static website?

I want to create a static html website with a calendar entry download function, it should work on new browsers (no need for IE).

First I tried out this js lib to create a .ics file: https://github.com/nwcell/ics.js - I couldn't get it to work...
Then I tried an adjusted fork, which I did get to create and download a file with: https://github.com/matthiasanderer/icsFormatter

I'm testing it on Windows 10 and it opened successfully in MS Outlook but then I noticed the file didn't open in the Windows calendar app:
The error translates to something like: "The event couldn't be opened. Perhaps the calendar file is damaged."
Windows Calendar App Error Message

In Safari on an iPhone an error also occurs when tapping the download button:
The error translates to something like: "Safari can not load this file."
Safari error message

I validated the generated .ics file with this tool: http://ical-validator.herokuapp.com/validate/ , adjusted the JS code to eliminate almost all errors - and I don't know if this last error, that I don't know how to get rid of, is essential: 

Specifying the charset in the MIME Content-Type is mandatory

Validation Error
I thought the MIME type should not be the problem because it is defined in the JS-download function in this line:

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

I also wonder why the download works fine in Chrome but Firefox (V.72) downloads the file with twice the file ending at the end: .ics.ics
Double file ending

And I wish I could give the file a name - but the only way that I found to do this was for .csv files in the bottom part of this answer and it didn't work - I think the encodeURI function destroyed my linebreaks or something.

This is the content of my generated .ics file:

BEGIN:VCALENDAR
PRODID:-//test//cal_events/NONSGML v1.0//DE
VERSION:2.0
BEGIN:VEVENT
UID:b1e4da94-1550-453f-bdee-a085a0b14231
CLASS:PUBLIC
DESCRIPTION:This is the description...
DTSTAMP:20200125T084646Z
DTSTART:20200229T190000z
DTEND:20200229T230000z
LOCATION:Deutschland
SUMMARY:Event Title
TRANSP:TRANSPARENT
END:VEVENT
END:VCALENDAR

Looks like this question is similar...

Solution

  • Both you DTSTART and DTEND have a lower case z as suffix instead of capital Z

    DTSTART:20200229T190000z
DTEND:20200229T230000z

    See https://www.rfc-editor.org/rfc/rfc5545#section-3.3.5

    The date with UTC time, or absolute time, is identified by a LATIN CAPITAL LETTER Z suffix character, the UTC designator, appended to the time value.