Getrennte Veranstaltungskalender

Ortsgebundene Termine mit einer Kartenansicht und Online-Terminkalender separiert, aber verbunden

Column

Diese Handreichung setzt etwas Grundwissen in HTML voraus.

Wir haben beim CMS Garden das neue Maps-Modul getestet (siehe Link am Ende dieses Artikels). Dort gibt es verhältnismäßig viele Online-Veranstaltungen, die mit der neuen Karten-basierten Logik nicht mehr in der Terminliste auftauchen würden. Es war also schnell klar, dass wir eine alternative Terminliste benötigen, die auch leicht aufzufinden ist.

Liste mit Online- und Hybrid-Veranstaltungen

Der CMS Garden hat diese Lösung beigesteuert: Eine Ansicht (View) in OpenCulturas 2.1, die sich auf einer einfachen Seite platzieren lässt:

  1. Ansicht (View) hinzufügen
  2. Verwandte Termine wählen
  3. Kommende Online-Termine wählen
  4. URL-Alias setzen (in unserem Beispiel: /kalender/archiv)

Gezeigt werden alle Veranstaltungen, an denen man online teilnehmen kann, also auch Hybrid-Veranstaltungen. Diese Ansicht ist vergleichbar mit der herkömmlichen Kalenderansicht. Es hängt aber keine Karte daran und ein paar Filter wurden entfernt. 

Der URL-Alias sorgt dafür, dass auf der Online-Kalenderseite im Brotkrumenpfad ein Link zum kartenbasierten Kalender auftaucht. Andere Strategien, z. B. mit einer vorgeschalteten Verteilerseite, sind natürlich auch denkbar.

Linkbereich zum Wechsel zwischen Karte und Online-Liste

Hier ist ein bisschen Handarbeit erforderlich, dafür habt ihr aber auch die volle Entscheidungsfreiheit, ob ihr überhaupt einen separaten Kalender für Online-Veranstaltungen anbieten wollt, welche URL ihr vergebt, ob ihr weitere Seiten "andocken" wollt.

Publication date
Author
Bild
Schaltflächenartiger Link 'Termine vor Ort', daneben 'Online-Termine', darunter ein Filterbereich mit Auswahlliste 'CMS', Startdatum, Enddatum, Erweiterte Filter zum Aufklappen, in der Liste darunter Teaser zu: CMS-Sprechstunde am 18. April 2024 und All-CMS-Meetup am 7. Mai 2024

Wechselseitige Links über dem Online-Veranstaltungskalender

CMS Garden hat auch ein bisschen Gestaltung beigesteuert, damit diese Links nicht untergehen. Dafür werden die CSS-Klassen in folgendem HTML verwendet:

<nav class="tabs" role="navigation" aria-label="Alternative Kalender">
   <h6 class="visually-hidden">
       Alternative Kalender
   </h6>
   <ul class="tabs secondary">
       <li class="is-active">
           <a class="icon location-dot current" href="/de/kalender/">Termine vor Ort</a>
           <span class="visually-hidden">(active tab)</span>
       </li>
       <li>
           <a class="icon tv" href="/de/kalender/online">Online-Termine</a>
       </li>
   </ul>
</nav>

Das HTML wurde wie folgt manuell platziert und angepasst:

  1. Inhaltselement Text einfügen und über den Ansicht-Abschnitt verschieben.
  2. Textformat "Vollständiges HTML" wählen
  3. Quellcode-Bearbeitung wählen
  4. HTML einfügen, Links überprüfen/anpassen

Die Klassen "is-active", "current" und das "active tab"-Tag entsprechend verschieben beim Einfügen auf der komplementären Seite mit dem kartenbasierten Kalender.

Wer sich mit HTML und FontAwesome (dem Icon-Schriftsatz) auskennt, kann auch andere Icons einsetzen. Dabei ist nur wichtig zu wissen, dass der Editor leere HTML-Tags entfernt.

Im Artikel genannt

Bild
Bildschirmfoto einer Karte mit Markierungen, darüber aufgeklappt ein Formular zum Filtern

Verbesserte Map verwenden

Anleitung zum Ersetzen der Orte-Übersicht und/oder des Kalenders

Anleitung für Sitebuilder zum Einsetzen der mit OpenCulturas 2.1 verfügbaren Karten-basierte Suche.