Für unser Smarter Event Booking haben wir eine automatische Erstellung von ICS-Kalendereinträgen im SharePoint in JavaScript/TypeScript implementiert. Wenn sich ein Mitarbeiter für ein Event anmeldet, soll er bei der Einladungsemail automatisch einen Kalendereintrag erhalten. Zusätzlich soll es einen Download-Button direkt beim Event geben. Da es sich um eine sehr generische Lösung handelt, die man auch für ganz normale SharePoint‑Kalender verwenden kann, haben wir uns entschlossen, die Lösung mit der Community zu teilen.
ICS Kalendereintrag per JavaScript erzeugen
Um den Kalendereintrag per ICS zu erzeugen, müssen wir zuerst den Dateiinhalt erstellen. Hierzu übergeben wir einer Methode alle relevanten Daten wie Start, Ende, Betreff, Beschreibung und Ort.
Als Rückgabewert kommt dann die ICS-Datei im String-Format. Um zu wissen, welche Daten in eine ICS-Datei 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 der ICS-Datei 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.
ICS im SPFx oder als Field-Customizer bei einem SharePoint Kalender
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!
