Events & Veranstaltungskalender – modern, flexibel, im Handumdrehen platziert
Zeige deine Termine, Events und Veranstaltungen als eleganten Monatskalender, als Liste oder als Kachel-Grid – frei platzierbar per OnPage Composer (OPC) auf jeder Seite. Mit Kategorien & Farben, sprechenden URLs, Karten-Einbettung, iCal-Export und einem vollständig editierbaren Styling (Farben, Buttonform, Schrift & mehr) – komplett ohne Programmierung.
Perfekt für: Konzerte & Messen, Webinare & Workshops, Sale-Aktionen, Tastings, Vereins- und Community-Termine.
Drei Ansichten in einem Portlet
- Monatskalender – klassische Kalender-Matrix mit Monatsnavigation & „Heute“.
- Liste – kompakte, chronologische Übersicht mit Datums-Badge.
- Kacheln – visuelles Grid mit Titelbild pro Event.
- Umschalter im Frontend – Besucher wechseln die Ansicht per Klick.
Styling-Editor Highlight
- Akzentfarben & Verlauf – passe das Design an dein Shop-CI an.
- Buttonform wählbar – eckig, abgerundet oder Pill.
- Eckenradius, Schriftart, Schatten – frei einstellbar.
- Live-Vorschau – Ergebnis sofort sichtbar, ohne Code.
Event-Verwaltung
- Alle Felder – Titel, Start/Ende, ganztägig, Ort, Adresse, Bild, Beschreibung.
- Externer Link – z.B. zur Ticket- oder Anmeldeseite, optional im neuen Fenster.
- Eigene CSS-Klasse – für individuelle Feinheiten pro Event.
- Aktiv/Inaktiv & Sortierung – volle Kontrolle über die Ausgabe.
Kategorien mit Farben
- Farb-Zuordnung – jede Kategorie mit eigener Farbe (Colorpicker).
- Filter-Chips im Frontend – Besucher filtern Events nach Kategorie.
- Farbige Badges – Kategorie sofort erkennbar in allen Ansichten.
- Sortierbar – Reihenfolge frei bestimmen.
Detail-Popup & SEO-Seiten
- Schickes Detail-Popup – Bild, Datum, Ort, Beschreibung im animierten Modal.
- Sprechende URLs – jede Veranstaltung unter
/paw-events/<slug>. - SEO-optimiert – eigener Title, Meta-Description, Open-Graph-Tags.
- Direkt verlinkbar – ideal für Newsletter & Social Media.
Karte & Kalender-Export
- Karten-Einbettung – Veranstaltungsort direkt als Karte (OpenStreetMap oder Google Maps, kein API-Key nötig).
- iCal-Export (.ics) – „Zum Kalender hinzufügen“ für Outlook, Apple & Google Kalender.
- Archiv-Ansicht – vergangene Events separat abrufbar.
- Wochenstart wählbar – Montag oder Sonntag.
OPC-Portlet – frei platzierbar OnPage Composer
- Per Drag & Drop – auf jeder OPC-Seite einfügen.
- Pro Portlet konfigurierbar – Ansicht, Kategorie-Filter, max. Anzahl.
- Mehrfach nutzbar – z.B. Startseite „Kacheln“, Event-Seite „Kalender“.
- OPC-Styles & Animationen – zusätzlich zu den Plugin-Stilen nutzbar.
Technische Details
- JTL-Shop 5.5.1+, PHP 7.4+, NOVA-Template, OPC.
- 3 Datenbanktabellen – Events, Kategorien, Konfiguration/Styling.
- JSON-Endpoint –
/paw-events/datafür die Frontend-Ausgabe. - Mehrsprachig – Sprachvariablen für Deutsch & Englisch.
Screenshots
Events & Veranstaltungskalender – Dokumentation
Moderner Veranstaltungskalender für JTL-Shop 5: Events als Monats-, Listen- oder Kachelansicht per OPC-Portlet anzeigen – mit farbigen Kategorien, Detail-Popup, sprechenden URLs, Karten-Einbettung, iCal-Export und vollständig editierbarem Styling.
Installation & Einrichtung
Plugin installieren & aktivieren
ZIP hochladen unter Plugins → Pluginverwaltung. Die Datenbanktabellen werden automatisch angelegt.
Kategorien anlegen
Im Backend-Menü „Events Plugin für JTL-Shop 5“ → Tab „Kategorien“ die gewünschten Kategorien mit Farbe erstellen (optional).
Veranstaltungen erstellen
Im Tab „Events“ Termine anlegen: Titel, Start/Ende, Ort, Bild, Beschreibung und ggf. externen Link.
Portlet platzieren
Im OnPage Composer (OPC) das Portlet „Events (Kalender)“ auf die gewünschte Seite ziehen, Ansicht wählen und veröffentlichen.
Portlet einbinden (OnPage Composer)
Die Anzeige der Events erfolgt über das OPC-Portlet „Events (Kalender)“ in der Gruppe Inhalt. Ziehe es per Drag & Drop auf eine beliebige OPC-Seite.
| Einstellung | Beschreibung |
|---|---|
| Überschrift | Optionaler Titel über dem Kalender. |
| Standard-Ansicht | Monat (Kalender), Liste oder Kacheln – die anfänglich gezeigte Ansicht. |
| Nur Kategorie-ID | Zeigt ausschließlich Events dieser Kategorie. 0 = alle Kategorien. |
| Max. Anzahl Events | Begrenzt die geladenen Events. 0 = unbegrenzt. |
| Kategorie-Filter anzeigen | Blendet die Filter-Chips im Frontend ein/aus. |
Events verwalten
Im Tab „Events“ kannst du Veranstaltungen anlegen, bearbeiten, aktivieren/deaktivieren und löschen.
| Feld | Beschreibung |
|---|---|
| Titel | Name der Veranstaltung (Pflichtfeld). Aus dem Titel wird automatisch die sprechende URL erzeugt. |
| Kategorie | Ordnet das Event einer farbigen Kategorie zu (optional). |
| Ganztägig | Blendet Uhrzeiten aus; Start = 00:00, Ende = 23:59. |
| Start / Ende | Datum und Uhrzeit. Nur der Start ist Pflicht. Endet ein Event vor dem Start, wird das Ende ignoriert. |
| Ort (Anzeigename) | Wird im Detail unter „Wo“ angezeigt (z.B. „Stadthalle Musterstadt“). |
| Adresse | Wird für die eingebettete Karte im Detail-Popup verwendet. |
| Bild-URL | Titelbild für Kachel- und Detailansicht (mit Live-Vorschau im Backend). |
| Beschreibung | Freitext, einfaches HTML erlaubt (z.B. <br>, <strong>). |
| Externer Link | Optionaler Link (z.B. zu Tickets/Anmeldung), auf Wunsch im neuen Fenster. |
| CSS-Klasse | Optionale eigene Klasse am Event-Element für individuelles Styling. |
| Sortierung / Aktiv | Reihenfolge und Sichtbarkeit im Frontend. |
Kategorien
Im Tab „Kategorien“ legst du farbige Kategorien an. Jede Kategorie erhält eine Farbe (Colorpicker), die als Badge in allen Ansichten und im Kalender-Pill erscheint.
- Name – Anzeigename der Kategorie.
- Farbe – per Farbwähler oder als HEX-Wert.
- Sortierung – Reihenfolge der Filter-Chips.
- Aktiv – nur aktive Kategorien erscheinen im Filter.
Ansichten im Frontend
| Ansicht | Beschreibung |
|---|---|
| Monat | Klassischer Kalender mit Monatsnavigation (« / ») und „Heute“-Button. Events erscheinen als farbige Pills am jeweiligen Tag. |
| Liste | Chronologische Liste mit Datums-Badge, Uhrzeit, Ort und Kurztext. |
| Kacheln | Grid mit Titelbild, Kategorie-Badge und Kurzbeschreibung pro Event. |
Besucher wechseln die Ansicht über den Umschalter, filtern nach Kategorie und können – sofern aktiviert – zwischen Kommende und Vergangene Events wechseln.
Detail-Popup & sprechende URLs
Ein Klick auf ein Event öffnet ein animiertes Detail-Popup mit Titelbild, Datum/Zeit, Ort, Beschreibung, Karte, iCal-Button und optionalem externen Link.
Zusätzlich ist jedes Event unter einer sprechenden URL direkt erreichbar:
/paw-events/<slug>
Diese SEO-Seite enthält eigenen Title, Meta-Description, canonical und Open-Graph-Tags – ideal zum Verlinken in Newslettern und sozialen Netzwerken.
sommerfest, sommerfest-2).Karte & Kalender-Export
Karten-Einbettung
Ist eine Adresse hinterlegt und die Karte aktiviert, wird der Ort im Detail als eingebettete Karte angezeigt. Wählbar zwischen OpenStreetMap und Google Maps – jeweils ohne API-Key.
iCal-Export (.ics)
Der Button „Zum Kalender hinzufügen“ liefert eine .ics-Datei über /paw-events/ics?id=<ID>, die sich in Outlook, Apple- und Google-Kalender importieren lässt.
Archiv
Ist der Archiv-Umschalter aktiviert, können Besucher vergangene Veranstaltungen separat aufrufen.
Styling-Editor
Im Tab „Styling“ passt du das Erscheinungsbild komplett ohne Code an. Alle Werte werden als CSS-Variablen ins Frontend ausgegeben und wirken sofort. Eine Live-Vorschau zeigt das Ergebnis direkt neben den Einstellungen.
| Option | Beschreibung |
|---|---|
| Akzentfarbe & Akzentfarbe 2 | Primärfarbe und Verlaufsfarbe für Buttons, Badges und Datumsboxen. |
| Button-Textfarbe | Textfarbe auf farbigen Buttons. |
| Karten-Hintergrund | Hintergrundfarbe der Karten/Container. |
| Text- & Überschrift-Farbe | Farben für Fließtext und Titel. |
| Buttonform | Eckig, Abgerundet oder Pill (voll rund). |
| Eckenradius | Radius der Karten (0–40 px); bei „Abgerundet“ auch der Buttons. |
| Schriftart | Eigene CSS font-family (z.B. Poppins, sans-serif) oder Shop-Standard. |
| Schatten | Weicher Schlagschatten an Karten an/aus. |
Einstellungen
| Einstellung | Beschreibung |
|---|---|
| Plugin aktivieren | Schaltet die Frontend-Ausgabe global an/aus. |
| Standard-Ansicht | Voreingestellte Ansicht (Monat / Liste / Kacheln), wenn das Portlet keine eigene vorgibt. |
| Wochenstart | Montag oder Sonntag als erster Tag der Kalenderwoche. |
| Archiv-Umschalter | Blendet die Umschaltung „Kommende / Vergangene“ ein. |
| Karten-Anbieter | OpenStreetMap oder Google Maps (beide ohne API-Key, per iframe). |
| Karte im Detail anzeigen | Aktiviert die eingebettete Karte im Detail-Popup. |
| iCal-Export anzeigen | Zeigt den Button „Zum Kalender hinzufügen“. |
Screenshots
Alle Screenshots findest du auf der Produktseite – dort kannst du sie anklicken und vergrößern.
FAQ
Wo werden die Events angezeigt?
Über das OPC-Portlet „Events (Kalender)“, das du auf jeder OnPage-Composer-Seite frei platzieren kannst. Zusätzlich ist jedes Event unter /paw-events/<slug> als eigene Seite erreichbar.
Benötige ich einen Google-Maps-API-Key?
Nein. Sowohl OpenStreetMap als auch Google Maps werden per iframe eingebettet – ganz ohne API-Key.
Kann ich das Aussehen an mein Shop-Design anpassen?
Ja – im Tab „Styling“ stellst du Farben, Buttonform, Radius, Schriftart und Schatten mit Live-Vorschau ein. Zusätzlich kannst du pro Event eine eigene CSS-Klasse vergeben.
Unterstützt das Plugin ganztägige und mehrtägige Events?
Ja. Aktiviere „Ganztägig“ für Termine ohne Uhrzeit. Für mehrtägige Events gibst du einfach ein Enddatum an.
Wie funktioniert der Kalender-Export?
Jedes Event bietet einen „Zum Kalender hinzufügen“-Button, der eine standardkonforme .ics-Datei liefert (importierbar in Outlook, Apple- und Google-Kalender).
Kann ich mehrere Kalender auf verschiedenen Seiten zeigen?
Ja – das Portlet ist beliebig oft einsetzbar und pro Instanz konfigurierbar (Ansicht, Kategorie-Filter, Limit).
Was passiert mit vergangenen Events?
Standardmäßig werden nur kommende/laufende Events gezeigt. Über den Archiv-Umschalter können Besucher vergangene Veranstaltungen aufrufen.
Ist das Plugin mehrsprachig?
Ja – die Frontend-Beschriftungen werden über Sprachvariablen für Deutsch und Englisch ausgeliefert.