Create ICS Calendar Entries Automatically in SharePoint

For our product Smarter Event Booking, we implemented automatic creation of ICS calendar entries in SharePoint using JavaScript/TypeScript. When an employee registers for an event, the invitation email should automatically include a calendar entry. In addition, there should be a download button directly on the event page. Because this solution is fairly generic—and can be used with regular SharePoint calendars as well—we decided to share it with the community.

Generate an ICS calendar entry with JavaScript

To generate a calendar entry as an ICS file, we first build the file content. We pass a function all relevant data such as start, end, subject, description, and location.

The function returns the ICS file as a string. For details on which fields are required/optional and their formats, see the official iCalendar specification.

public makeIcsFileContent(start: Date, end: Date, summary: string, description?: string, location?: string): string {
    return "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:" +
        this.convertDate(start) +
        "\n" +
        "DTEND;VALUE=DATE:" +
        this.convertDate(end) +
        "\n" +
        "SUMMARY:" +
        summary +
        "\n" +
        "X-ALT-DESC;FMTTYPE=text/html:" +
        (description !== undefined ? description : "") +
        "\n" +
        "LOCATION:" +
        (location !== undefined ? location : "") +
        "\n" +
        "END:VEVENT\n" +
        "END:VCALENDAR";
}

Finally, we trigger the download of the ICS file with a small client-side workaround.

public download(fileName: string, fileContent: string): void {
    const element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContent));
    element.setAttribute('download', fileName);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

We call this method when a certain URL parameter is present or when a user clicks “Download appointment” in their calendar entry.

ICS in SPFx or as a field customizer for a SharePoint calendar

In Smarter Event Booking, our SPFx implementation in SharePoint looks like this:

You can add the same logic in a field customizer to, for example, render a download field in a SharePoint calendar. If you’re interested, feel free to reach out!