ICS Kalendereinträge automatisch erstellen in SharePoint

Für unser Smarter Event Booking haben wir eine automatische Erstellung von ICS Kalendereinträge im SharePoint in JavaScript/TypeScript implementiert. Wenn sich ein Mitarbeiter für ein Event anmeldet, soll er bei der Einladungsemail automatisch einen Kalendereintrag erhalten. Bzw. zusätzlich soll es einen Download-Button beim Event direkt geben. Nachdem das eine sehr generische Lösung ist und man auch für ganz normale SharePoint Kalender verwenden kann – haben wir uns entschlossen die Lösung mit der Community zu teilen.

Um den Kalendereintrag per ICS zu erstellen, müssen wir zuerst den File-Content erstellen. Hierzu übergeben wir einer Methode alle relevanten Daten wie Start, Ende, Betreff, Beschreibung und Ort.

Als Rückgabewert kommt dann das ICS File im String Format. Um zu wissen, welche Daten in ein ICS File müssen/können, und in welchem Format, schaut ihr euch am besten den Standard an

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

Zu guter Letzt fehlt nur noch der Download des ICS Files per Javascript. Dies ist mit einem kleinen Workaround am Client möglich!

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

Diese Methode rufen wir nun auf, wenn ein gewisser URL Parameter vorhanden ist, oder wenn ein User bei seinem Kalendereintrag auf „Termin downloaden“ klickt.

Bei unserem Smarter Event Booking schaut die Implementierung im SharePoint in unserem SPFx wie folgt aus.

Das gleiche könnte man in einem Field-Customizer einbauen um z.B. ein Download-Feld bei einem SharePoint Kalender zu erzeugen. Falls hier Interesse besteht – bitte gerne melden!

Haben wir dein Interesse geweckt? Brauchst du weitere Informationen, weil du gerne selber Entwickeln willst? Oder bist du generell an unserer gesamten Lösung des Smarter Event Booking interessiert? Dann kontaktiere uns doch einfach!