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.