Die ersten Versuche, einen Google Kalender in einen Joomla Beitrag zu integrieren, waren semi-professionell. Die Probleme waren, dass der Kalender nicht professionell skalierte, dass heißt, das er nicht auf allen Geäreten richtig dargestellt wurde. Reste des Kalenders wurden abgeschnitten und nicht angezeigt, scrollen nach rechts funktionierte nicht. Bei unserer neuen Web-Seite habe ich deswegen KI gefragt, wie ich das verbessern kann, Ziel war es, dass die Probleme oben nicht mehr vorkämen, und das wir drei verscheidene Darstellungsformen bekommen würden, Ansicht pro Monat, pro Woche und Aktivitätenliste.
Noch etwas zum technischen Hintergrund unserer Web-Seite. Sie basiert zum derzeitigen Zeitpunkt auf Joomla 6.03, wir verwenden Helix Ultimate 2.2.3 als Template für das Frontend. Gehosted wird bei Ionos.
Schritt 1: Veränderung des verwendeten CSS für die Kalender-Elemente
Erst einmal was ist CSS: Cascading Style Sheets; für ‚gestufte Gestaltungsbögen‘; kurz: CSS) ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und JavaScript eine der Kernsprachen des World Wide Webs. Sie ist ein sogenannter living standard (dt. lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML (zum Beispiel bei SVG) eingesetzt werden.
Wo kann ich CSS Änderungen einbauen: Hier gibt es mehrere Möglichkeiten: Das Template Helix Ultimate bietet eine Schnittstelle an, wo wir CSS Code hinterlegen können. Dies wird jedoch schnell unübersichzlich. Wir haben uns entschieden, eine Datei custom.css in unserer Joomla Konfiguration zu hinterlegen und dort den entsprechenden Custom Code zu speichern. Hierzu bewegen wir uns in einem FTP Client in die Joomla Struktur. Unter dem Domain Namen in der Joomla Struktur finden den Ordner \templates\shaperhelix_ultimate\css. Dort legen wir eine leere Datei an custom.css. Hier können wir unseren zusätzlichen CSS Code hinterlegen. Mein Code wurde komplette von KI generiert. Wir haben für den Kalender den folgenden Code integriert:
/* ===============================
Google Kalender – Modul-Anpassung
Für: CalenderZwar (Monat, Woche, Agenda)
=============================== */
/* Monat-Ansicht */
#moduletable-CalenderZwar.month iframe {
width: 100% !important;
max-width: 100%;
height: 700px; /* Desktop-Höhe */
min-height: 500px; /* Mindesthöhe für kleine Bildschirme */
border: 0;
margin: 10px 0;
}
/* Woche-Ansicht */
#moduletable-CalenderZwar.week iframe {
width: 100% !important;
max-width: 100%;
height: 650px; /* Desktop-Höhe */
min-height: 500px;
border: 0;
margin: 10px 0;
}
/* Agenda-Ansicht */
#moduletable-CalenderZwar.agenda iframe {
width: 100% !important;
max-width: 100%;
height: 750px; /* Desktop-Höhe */
min-height: 500px;
border: 0;
margin: 10px 0;
}
/* Tablet */
@media (max-width: 768px) {
#moduletable-CalenderZwar.month iframe,
#moduletable-CalenderZwar.week iframe,
#moduletable-CalenderZwar.agenda iframe {
height: 600px;
}
}
/* Smartphone */
@media (max-width: 480px) {
#moduletable-CalenderZwar.month iframe,
#moduletable-CalenderZwar.week iframe,
#moduletable-CalenderZwar.agenda iframe {
height: 500px;
}
}
Im wesentlichen werden in dem Code Einstelungen gesetzt pro Kalenderansicht und pro Gerätetype.
Schritt 2: Einbau des Codes in einen Artikel (Module)
Nachdem wir nun das "Wie" gemacht haben, kommt nun das "Was" an die Reihe. Ersteinmal öffnen wir im Backend mindestens 2 Fenster. Nun wollen wir unseren Kalender irgendwo in Joomla einbauen. Wir verwenden hierzu den Ansatz über Beitrag / Modul. Da wir hierfür HTML Code einbauen müssen, keine Angst, wieder von KI generiert, müssen wir erst einamkl unseren Editor ausschalten, da Joomla ansonsten den HTL Code zerstört.
- Das ausschalten des Editors funktioinert im Joomla Menüpunkt "Benutzer". Im Backend gehen wir hierzu zum Menüpunkt "Benutzer", auf den Punkt "Verwalten", klicken auf unsere Id und hier auf den Reiter "Basiseinstellungen". In der Zeile "Editor" öndern wir den bestehenden Wert auf "Editor - keiner". Hiernach drücken wir auf "Speichern". Wir verlassen diese Maske nicht, denn wir wollen ja später den Wert wieder zurückändern.
- Nächster Schritt ist das anlegen eines Moduls, um unseren Code einbauen zu können. Hierzu gehen wim im Backend zu Site Inhalt => Module. Wir legen ein neues Module über "Neu+" vom Type "Eigenes Modul" an.
<div id="calendar-placeholder-Zwar" style="border:1px solid #ccc; padding:20px; text-align:center; max-width:100%; margin:0 auto;">
<p>
Dieser Kalender enthält Inhalte von Google. Durch Klick auf „Kalender anzeigen“ stimmen Sie zu, dass Inhalte von Google geladen werden. Dabei können personenbezogene Daten (z. B. Ihre IP-Adresse) an Google übertragen werden.
Weitere Informationen finden Sie in unserer <a href="/datenschutz" target="_blank">Datenschutzerklärung</a>.
</p>
<button id="calendar-btn-Zwar" style="padding:10px 18px; background:#2c7be5; color:white; border:none; border-radius:5px; font-weight:bold; cursor:pointer;">
Kalender anzeigen
</button>
</div>
<script>
function loadCalendarZwar() {
document.getElementById('calendar-placeholder-Zwar').innerHTML =
'<iframe src="https://calendar.google.com/calendar/embed?src=<Google Id des Kalnders>&ctz=Europe%2FBerlin" ' +
'style="border:0; width:100%; height:700px;" frameborder="0" scrolling="no"></iframe>';
document.cookie = "calendarConsent=true; path=/; max-age=" + 60*60*24*365;
}
if(document.cookie.indexOf("calendarConsent=true") >= 0) {
loadCalendarZwar();
} else {
document.getElementById('calendar-btn-Zwar').onclick = loadCalendarZwar;
}
</script>
Der obige Code hat folgenden Zweck. in einem ersten Schritt wird DSVGO Konformität hergestellt, Benutzer werden darauf hingewiesen, dass der kommende Inhalt von Google ist und sie können ihn ablehnen oder zustimmen. Hierzu wird ein Cookie gespeichert, um diese Aktion nicht jedesmal machen zu müssen. Im nächsten Schritt erfolgt die physische Einbindung des Kalenders. Hierbei muss nur fer fettgedruckte Code durch die jeweilige Google-Kalender-Id ausgetauscht werden. Durch die zusätzlichen Parameter "&mode=WEEK" und "&wkst=2" kann dann die Ansicht Wochenansicht und der Beginn der Woche angesteuert werden. Der erste Parameter wir direkt nach der Kalender Id eingefügt und der andere nach der Zeitzone. Wir speichern das Module und merken uns genau den Module-Namen und ggfls. die Id. Dann setzen wir im ersten Fenster den Editor Wert wieder zurück auf den Ausgangsweret, bei uns: "-Standard verwenden -".
- Letzter Schritt ist nun das Anlegen eines Beitrages, welches ziemlich Standard ist. Wir gehen im Backend zu, Punkt: "Inhalt => Beiträge". Hier erstellen wir einen neuen Beitrag mit "Neu +". Bei mir ist der Beitraginhalt minimal und lautet nur: . Den Beitrag selbst können wir jetzt noch mit Text ausgestalten oder Bildern. Der Beitrag selbst skaliert nun sauber auf allen Endgeräten