Create an ICS calendar file with Javascript. Pretty simple.

.ics attachment is a collection of headers that describes the event you want to add to the calendar and at the end of the day it would look similar to this:

BEGIN:VCALENDAR
VERSION:2.0
CALSCALE:GREGORIAN
PRODID:-letconst//calendar-snippet
METHOD:PUBLISH
BEGIN:VEVENT
UID:12345-unique
SUMMARY:Create .ics attachment 
DTSTART:20200802T103400
DTEND:20200802T110400
LOCATION:Ghryhorenka ave.
DESCRIPTION:Make sure it works on my own.
STATUS:CONFIRMED
SEQUENCE:0
END:VEVENT
END:VCALENDAR

The example above is a fully functional .ics attachment. You could create a .ics file on your computer, open it with your favorite text editor, paste the snippet above, and double click the attachment after save to make sure of it.

It contains one calendar event with the title of “Create.ics attachment” that starts on 2 august 2020 at 10:30 am.

Let’s take a closer look at the headers that were used in the snippet.

METHOD:PUBLISH

This header is used to create a calendar event in the calendar. Actually it is used for the update as well, but this is out of the scope for this article. If you would like to see the update in action – take a look at Google Calendar. Try to create a test event, export it, then change it and export it again.

UID

This is the id of the calendar event. It should be unique for all the events existing in your calendar. To make sure that there would be no collisions a few practices may come in handy, e.g. adding the product name before the id, like letconst-uuid-value-01.

id is used to identify the event later in the future when possible updates for it would appear.

Now, let’s take a closer look at the structure of the snippet. You could have seen that it consists of a “layout” as I like to call it and actual event:

BEGIN:VCALENDAR
VERSION:2.0
CALSCALE:GREGORIAN
PRODID:-letconst//calendar-snippet
METHOD:PUBLISH

{{EVENT}}

END:VCALENDAR

Where EVENT is:

BEGIN:VEVENT
UID:12345-unique
SUMMARY:Create .ics attachment 
DTSTART:20200802T103400
DTEND:20200802T110400
LOCATION:Ghryhorenka ave.
DESCRIPTION:Make sure it works on my own.
STATUS:CONFIRMED
SEQUENCE:0
END:VEVENT

One .ics attachment could easily have a bunch of calendar events in it, to do it you would need to copy/paste the snippet above multiple times, but before don’t forget to keep the UID header value unique.

That’s pretty much the basics of creating .ics attachments.

If you are interested in some specific topic related to .ics attachments – please, let me know!