„Zum Kalender hinzufügen“-Button für GMail, Outlook, iCal

Zuletzt verändert am 24. Juli 2026 • 4 Min. Lesezeit • 743 Wörter

Link zur Webseite befindet sich in der Zwischenablage

Es ist überraschend, dass bei allen großen E-Mail-Programmen die Funktion „Zum Kalender hinzufügen“ fehlt.

„Zum Kalender hinzufügen“-Button für GMail, Outlook, iCal — Bild von Michael Jeltsch

Das ist mehr Arbeit, als es im Jahr 2026 sein sollte. Dies waren die ersten Anleitungen, die bei mir funktioniert haben: https://www.litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails/ . Die Anleitung verwendet im Wesentlichen handgeschriebenen Code (sowie Code, der mit Amit Agarwals „Calendar Links“-Tool ( https://www.labnol.org/apps/calendar.html ) generiert wurde).

Aber muss es dafür nicht ein Chrome-Plugin geben? Oder ein JavaScript? Die Anleitung nutzt eine Kombination aus verschiedenen Online-Tools, was den Vorgang mühsam macht … Leider gibt es, wenn alles, was ich gelesen habe, stimmt, keine gute kostenlose Lösung (meldet euch bei mir, falls ihr etwas anderes wisst!). Noch schlimmer: Es gibt keine Möglichkeit, einen Termin automatisch zum iCloud-Kalender von Apple hinzuzufügen, außer durch den Import einer iCal-Datei (was viel manuelles Klicken erfordert).

Sowohl Google als auch Outlook akzeptieren Kalendertermin-Daten jedoch direkt in den GET-Abfrageparametern der Anfrage-URL (d. h. über einen einfachen HTML-Link oder einen Button, auf die man klicken kann). Es ist relativ einfach, Buttons in eine E-Mail einzufügen, die Google Kalender oder Outlook öffnen und die entsprechenden Kalenderfelder ausfüllen. Wie bereits erwähnt, unterstützt nur Apples iCal diese Funktion nach wie vor nicht, und eine Umgehungslösung besteht darin, eine iCal-Datei zum Herunterladen anzubieten, um sie in iCal zu importieren, obwohl dies voraussetzt, dass du diese Datei auf einem Server hast (Gdrive, OneDrive oder DropBox würden ebenfalls funktionieren).

Aber wie kann ich die Buttons (die wohl korrekt “Schaltflächen” auf Deutsch heissen) mit dem erforderlichen Code ganz einfach in Sekundenschnelle in eine E-Mail einfügen, während ich die E-Mail schreibe? Meine Antwort lautet: mit Espanso! Espanso ( https://espanso.org/ ) überwacht alle Ihre Tastenanschläge und löst bestimmte Ereignisse aus, wenn es bestimmte Kombinationen erkennt, die Sie frei definieren können. Ich habe die Buchstaben „\cal“ einem Skript zugewiesen, das ein Dialogfeld mit Feldern zur Eingabe von „Veranstaltung“, „Ort“, „Startdatum/-zeit“ und „Enddatum/-zeit“ öffnet und anschließend einen Button mit den korrekten Daten in meinen E-Mail-Client einfügt. Auch hier müssen Apple-Nutzer die .ical-Datei herunterladen und in iCalendar importieren. Leider ist das Erstellen der iCal-Datei und das Hochladen auf einen Server viel aufwendiger, als es sein sollte. Du kannst das Webtool von Amit Agarwal verwenden, um die Datei zu erstellen ( https://www.labnol.org/apps/calendar.html ), sie anschließend auf einen Server oder einen Dateifreigabedienst deiner Wahl hochladen und die URL notieren, um sie in das Espanso-Formular einzufügen. Relativ einfach – unter Linux oder Mac – ist es auch, die spontan generierte iCal-Datei per scp auf einen Server deiner Wahl hochzuladen, wie im folgenden Espanso-YAML-Konfigurationseintrag beschrieben. Beachte, dass der scp-Befehl eine passwortlose Authentifizierung verwendet, die du einrichten musst!

  - trigger: "/cal"
    vars:
 - name: form
 type: form
 params:
 layout: |
 Veranstaltungstitel (verwende %20 für Leerzeichen): [[title]]
            Ort (verwende %20 für Leerzeichen): [[loc]]
 Datum (JJJJ-MM-TT): [[date]]
 Startzeit (HH:MM): [[start]]
 Endzeit (HH:MM): [[end]]
      - name: gdate
 type: shell
 params:
 cmd: "echo '{{form.date}}' | tr -d '-'"
 - name: gstart
 type: shell
 params:
          cmd: "echo '{{form.start}}' | tr -d ':'"
 - name: gend
 type: shell
 params:
 cmd: "echo '{{form.end}}' | tr -d ':'"
      - name: ics_filename
 type: shell
 params:
 cmd: |
 FILENAME="event_{{gdate}}_{{gstart}}.ics"
            TITLE_CLEAN=$(echo '{{form.title}}' | sed 's/%20/ /g')
 LOC_CLEAN=$(echo '{{form.loc}}' | sed 's/%20/ /g')
            
            # Die iCal-Datei lokal generieren
 cat <<EOF > "/tmp/$FILENAME"
 BEGIN:VCALENDAR
 VERSION:2.0
            PRODID:-//mjlab.fi//Espanso//EN
 BEGIN:VEVENT
 SUMMARY:$TITLE_CLEAN
 DTSTART:{{gdate}}T{{gstart}}00
            DTEND:{{gdate}}T{{gend}}00
 LOCATION:$LOC_CLEAN
 END:VEVENT
 END:VCALENDAR
 EOF
            
            # Auf Ihren Server hochladen (Kommentar entfernen und Pfad/Benutzer entsprechend Ihrem Server anpassen)
 scp /tmp/$FILENAME user@mjlab.fi:/var/www/mjlab.fi/iCal/$FILENAME > /dev/null 2>&1
            
            echo "$FILENAME"
    html: |
 <html>
 <body>
 <style>
 .addToCalendar_google { background-color: #bf3f3f; border-radius: 28px; border: 1px solid #8f0e0e; display: inline-block; cursor: pointer; color: #ffffff; font-family: Arial, sans-serif; font-size: 16px; padding: 6px 12px; text-decoration: none; text-shadow: 0px 1px 0px #441515; margin: 5px; }
 .addToCalendar_windows { background-color: #4981c1; border-radius: 28px; border: 1px solid #100f4e; display: inline-block; cursor: pointer; color: #ffffff; font-family: Arial, sans-serif; font-size: 16px; padding: 6px 12px; text-decoration: none; text-shadow: 0px 1px 0px #273066; margin: 5px; }
 .addToCalendar_apple { background-color: #8f8f8f; border-radius: 28px; border: 1px solid #2c302c; display: inline-block; cursor: pointer; color: #ffffff; font-family: Arial, sans-serif; font-size: 16px; padding: 6px 12px; text-decoration: none; text-shadow: 0px 1px 0px #080c07; margin: 5px; }
        .addToCalendar_google img, .addToCalendar_windows img, .addToCalendar_apple img { Breite: 20px; Höhe: 20px; vertikale Ausrichtung: mittig; Rahmen: keiner; }
        .addToCalendar_google span, .addToCalendar_windows span, .addToCalendar_apple span { vertikale Ausrichtung: mittig; Abstand links: 12px; }
 </style>
      
      <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text={{form.title}}&dates={{gdate}}T{{gstart}}00/{{gdate}}T{{gend}}00&location={{form.loc}}" class="addToCalendar_google">
 <img src="https://mjlab.fi/iCal/google.png" alt="Google" width="20" height="20" style="margin-right: 6px; vertical-align: middle; border: none;" />
 <span>Zum Google-Kalender hinzufügen</span>
      </a>
 <a href="https://outlook.office.com/calendar/0/action/compose?allday=false&subject={{form.title}}&startdt={{form.date}}T{{form.start}}:00&enddt={{form.date}}T{{form.end}}:00&location={{form.loc}}&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent" class="addToCalendar_windows">
        <img src="https://mjlab.fi/iCal/windows.png" alt="Outlook" width="20" height="20" style="margin-right: 6px; vertical-align: middle; border: none;" />
        <span>Zu MS Outlook hinzufügen</span>
 </a>
 <a href="https://mjlab.fi/iCal/{{ics_filename}}" class="addToCalendar_apple">
        <img src="https://mjlab.fi/iCal/apple.png" alt="Apple" width="20" height="20" style="margin-right: 6px; vertical-align: middle; border: none;" />
        <span>Zu Apple hinzufügen (iCal-Datei)</span>
 </a>
 
 </body>
 </html>

Older: Antrittsvorlesungen der neuen Professoren