For our Smarter Event Booking, we have implemented an automatic creation of ICS calendar entries in SharePoint with JavaScript/TypeScript. When an employee registers for an event, he should automatically receive a calendar entry in the invitation email. Or in addition, there should be a download button at the event directly. Since this is a very generic solution and you can also use it for normal SharePoint calendars – we decided to share the solution with the community.

Create ICS calendar entry via JavaScript

To create the calendar entry via ICS, we first need to create the file content. For this purpose, we pass all relevant data such as start, end, subject, description and location to a method.

The return value is the ICS file in string format. To know which data must/can be in an ICS file, and in which format, it is best to look at the standard

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

Last but not least, the only thing missing is the download of the ICS file via Javascript. This is possible with a small workaround on the client!

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 now call this method if a certain URL parameter is available, or if a user clicks on “Download appointment” in his calendar entry.

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

With our Smarter Event Booking, the implementation in SharePoint in our SPFx looks like this.

The same could be integrated into a field customizer to create, for example, a download field for a SharePoint calendar. If you are interested here – please feel free to contact us!

Have we sparked your interest? Do you need more information because you would like to develop yourself? Or are you generally interested in our entire Smarter Event Booking solution? Then just contact us, we would be glad to help you out!

Contact