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

Vorarlberger Standardschulinstallation Verfasser: Alexander Zoppel

© 2024 IT-Regionalbetreuer Vorarlberg 6900 Bregenz, Römerstraße 14 Alle Rechte vorbehalten

1. Google Account erstellen

Google Account erstellen:

Google.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

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

Google Projekt „Kalender Export“ erstellen und Google API generieren

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:

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

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.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Outlook-Kalender zum Teilen bereitstellen

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

Outlook-Kalender mit Terminen befüllen

Outlook-Kalender teilen

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

Gewünschten Kalender veröffentlichen

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

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

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

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“

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

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

Kalender importieren

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

Neuer Datensatz: Google Calendar

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

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Für alle weiteren Kalender gleich verfahren.

Schlussendlich werden alle importierten Kalender als Datensätze angezeigt:

Inhaltselement (im Frontend sichtbar) anlegen

Seite  Termine  Content  + Inhalt  Allgemeines Plugin

Plugin-Einstellungen:

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

Zusätzliche Einstellungen vornehmen.

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

Anmerkung:

Eine deutsche Übersetzung des Plugins ist möglich: Wartung  Manage Language Packs Frontend-Ansicht Woche:

Frontend-Ansicht Jahresliste:

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.