Direkt zum Hauptinhalt

Typo3 VOBS-Templates: Kalender einbinden, Integration von Google-, Outlook- und .ics-Kalendern

1.Google Account erstellen

Google Account erstellen:

Ein Bild, das Text, Screenshot, Schrift, Webseite enthält.  Automatisch generierte BeschreibungEin Bild, das Text, Screenshot, Schrift enthält.  Automatisch generierte BeschreibungGoogle.at  Anmelden  Konto erstellen  Für die Arbeit oder mein Unternehmen Beispielhaft: Erstellung eines Google Accounts für die Mittelschule Test

Weitere Schritte und Angaben (Empfehlungen):

    • Vorname: Mittelschule ***
    • Geburtsdatum: über 18
    • Geschlecht: Ich möchte dies nicht beantworten
    • Vorgeschlagene E-Mail-Adresse verwenden oder eine eigene generieren
    • Geeignetes (sicheres!) Passwort erstellen
    • E-Mail-Adresse zur Kontowiederherstellung hinzufügen: Überspringen
    • Telefon: Überspringen
    • Einstellungen auswählen  Manuell (4 Schritte) Web- & App-Aktivitäten nicht in meinem Konto speichern YouTube-Verlauf nicht in meinem Konto speichern Allgemeine Werbung einblenden

Gelegentlich Erinnerungen für den Privatsphärecheck erhalten: Haken nicht setzen

    • Angaben bestätigen und Datenschutz zustimmen
    • Unternehmensprofil einrichten: Jetzt nicht

embedded-image-izfy0rvp.pngDer Google Account ist nun erstellt und unser Google Kalender (bei bestehender Anmeldung) unter calendar.google.com oder im sich rechts oben angezeigten Menü einsehbar.

embedded-image-ckau730y.jpeg

Google Projekt „Kalender Export“ erstellen und Google API generieren

embedded-image-ajj1qnzx.pngembedded-image-aznieino.jpeg

Unter console.cloud.google.com den Nutzungsbedingungen zustimmen.

Unter Projekt auswählen „Neues Projekt“

„Kalender Export“ erstellen:

Ein Klick auf APIS UND DIENSTE AKTIVIEREN führt zur API-Bibliothek:

embedded-image-rmnifa9r.jpeg

Unter Google Workspace ist die Google Calendar API zu finden. Diese muss aktiviert werden.

embedded-image-dszv3a4d.jpegembedded-image-jlqliwky.png

Unter Anmeldedaten wird nun ein API-Schlüssel erstellt und ist unter „Schlüssel anzeigen“ jederzeit einsehbar. Der API-Schlüssel kann auch eindeutig benannt werden. Dieser Schlüssel wird später bei der Einrichtung des Typo3-Kalender-Plugins zwingend benötigt.

embedded-image-t4kktg3j.jpegembedded-image-4hbkazts.png

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Outlook-Kalender zum Teilen bereitstellen

Im Vorfeld müssen von der IT-Betreuung Einstellungen im Tenant vorgenommen werden:

Ein Bild, das Text, Screenshot, Schrift, Zahl enthält.  Automatisch generierte BeschreibungEin Bild, das Text, Screenshot, Schrift enthält.  Automatisch generierte Beschreibung

Outlook-Kalender mit Terminen befüllen

embedded-image-fduak4xh.jpegembedded-image-fvj5xebu.png

Outlook-Kalender teilen

In der Browser-Version(!) von Outlook Einstellungen (Zahnrad)

embedded-image-e7wrdpll.png

Gewünschten Kalender veröffentlichen

embedded-image-solfnp97.pngembedded-image-ci3ekvki.jpeg

Pflege und Integration von Google-, Outlook- bzw. sonstigen .ics-Kalendern

In Google kann nun der kopierte Link zur Outlook-.ics-Datei (oder jede andere .ics-Datei) eingebunden werden: Kalender hinzufügen  Per URL

Ein Bild, das Text, Schrift, Software, Webseite enthält.  Automatisch generierte Beschreibung

Ansicht im Google-Kalender mit allen aktivierten Kalendern:

Blau: Originale Google Einträge (Mittelschule Test) Orange: Outlook Einträge (Kalender Import MS365) Grün: Feiertage in Österreich

embedded-image-zxnlkbyt.jpeg

Nun können alle gewünschten Kalender einzeln für die Integration in Typo3 bearbeitet werden:

embedded-image-1ukfisjg.jpeg

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

In diesem Beispiel werden die Kalender-IDs von drei Kalendern verwendet:

Google Kalender „Mittelschule Test“: mittelschuletest@gmail.com

Weitere Kalender „Feiertage in Österreich: de.austrian#holiday@group.v.calendar.google.com

Weitere Kalender: „Kalender Import MS365“: xxxxxxxxxxxxxxxxx@import.calendar.google.com

Typo3: Extension me_google_calendar einrichten und pflegen

Installation der Extension

Eine Deaktivierung des bestehenden Plugins Calendarize wird empfohlen.

Installation des Plugins

Erweiterungen  Erweiterungen hinzufügen

 me_google_calendar

Anlegen eines SYS Ordners unter „Datenbanken“

Liste  Neuer Ordner „kalender-db“

Ein Bild, das Text, Screenshot, Software, Computersymbol enthält.  Automatisch generierte BeschreibungEin Bild, das Text, Screenshot, Software, Computersymbol enthält.  Automatisch generierte Beschreibung

Anschließend wird im Template das statische Template Google Calendar eingebunden

Template  Root (in diesem Fall VOBSDemo)  Info/Bearbeiten  Vollständigen Template-Datensatz bearbeiten  Enthält

Ein Bild, das Screenshot, Text, Software, Computersymbol enthält.  Automatisch generierte Beschreibung

Um sicher zu gehen, dass es keine Konflikte bei der Ausgabe der Termine gibt, wird die korrekte Zeitzone im Setup des Templates angegeben:

Template  Root (in diesem Fall VOBSDemo)  Info/Bearbeiten  Setup

plugin.tx_megooglecalendar.settings.timeZone = Europe/Berlin

Ein Bild, das Text, Software, Computersymbol, Multimedia-Software enthält.  Automatisch generierte Beschreibung

Kalender importieren

Kalender in kalender-db importieren: Liste  kalender-db  +

embedded-image-ktzlc8as.png

Neuer Datensatz: Google Calendar

Ein Bild, das Text, Software, Computersymbol, Betriebssystem enthält.  Automatisch generierte Beschreibung

Angaben: Titel, Google API Key, Calendar Id, optional Css für Styling (Farbe, etc.)

embedded-image-c2c2afwe.png

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Für alle weiteren Kalender gleich verfahren.

Schlussendlich werden alle importierten Kalender als Datensätze angezeigt:

Ein Bild, das Text, Screenshot, Software, Computersymbol enthält.  Automatisch generierte Beschreibung

Inhaltselement (im Frontend sichtbar) anlegen

Seite  Termine  Content  + Inhalt  Allgemeines Plugin

Ein Bild, das Text, Screenshot, Software, Computersymbol enthält.  Automatisch generierte BeschreibungEin Bild, das Text, Software, Screenshot, Multimedia-Software enthält.  Automatisch generierte Beschreibung

Plugin-Einstellungen:

Datensätze angeben (aus SYS-Ordner kalender-db)

embedded-image-awweift2.jpeg

Zusätzliche Einstellungen vornehmen.

In diesem Fall: Auswählbare Ansichten Monat, Woche und Jahresliste

embedded-image-yngwwiq1.png

Anmerkung:

embedded-image-mtwzteby.pngEine deutsche Übersetzung des Plugins ist möglich: Wartung  Manage Language Packs Frontend-Ansicht Woche:

Frontend-Ansicht Jahresliste:

Ein Bild, das Text, Screenshot, Schrift, Zahl enthält.  Automatisch generierte Beschreibung

Bei einem Klick auf einen Termin öffnet sich ein Popup-Fenster mit zusätzlichen Angaben (falls eingegeben): Beschreibung des Termins, Wann, Wo (ein Klick auf den Ort öffnet Google Maps falls angegeben), Download der .ics Datei.