Eventliste und Kalender

Für die Übersicht deiner Events gibt es zwei Bausteine: die Liste und den Kalender. Beide zeigen nur Veröffentlichtes, und zwar immer den aktuellen Stand aus dem Dashboard.

Eventliste

<ts-event-filter></ts-event-filter>
<ts-event-list></ts-event-list>

Attribut	Was es macht
limit="6"	Zeigt höchstens so viele Events, etwa die nächsten sechs auf deiner Startseite
category="concert"	Zeigt nur diese Kategorie, etwa eine eigene Seite nur für Konzerte

Die Kategorien heißen wie im Dashboard, nur als englisches Kürzel: concert, festival, party, theatre, musical, classical, comedy, dance, reading, film, exhibition, sports, kids, food, workshop, conference, tour, market, other.

Eigener Aufbau jeder Karte

Ohne weitere Angabe bekommt jedes Event eine einfache Karte. Mit einem <template> baust du sie selbst. Darin funktionieren alle Bausteine eines Events:

<ts-event-list>
  <template>
    <article class="karte">
      <ts-event-cover></ts-event-cover>
      <p class="datum"><ts-event-date></ts-event-date></p>
      <h3><ts-event-link></ts-event-link></h3>
      <p><ts-event-venue></ts-event-venue></p>
      <p class="preis"><ts-event-price></ts-event-price></p>
      <ts-event-link label="Tickets"></ts-event-link>
    </article>
  </template>
</ts-event-list>

Kalender

<ts-event-calendar></ts-event-calendar>

Der Kalender zeigt einen Monat als Tabelle. In jedem Tag stehen die Events als Links, ein Klick auf den Tag öffnet darunter alle Termine mit Uhrzeit, Ort und Preis. Die Woche beginnt je nach Sprache am richtigen Tag. Viele Zeitfenster an einem Tag, etwa in einem Museum, stehen als ein Eintrag da.

Attribut	Was es macht
category="concert"	Zeigt nur diese Kategorie
month="2027-03"	Startet in diesem Monat

Eine Monatsansicht braucht etwas CSS, damit sie auf dem Handy gut aussieht. Blende dort zum Beispiel die Event-Links aus, dann bleibt ein schlankes Raster, und die Termine erscheinen beim Klick darunter:

@media (max-width: 40rem) {
  .ts-calendar__events { display: none; }
}
.ts-calendar__cell[data-events] .ts-calendar__day { font-weight: 700; }
.ts-calendar__cell[data-today] .ts-calendar__day { outline: 2px solid currentColor; }

Wohin führt ein Klick?

Standardmäßig bleibt der Besucher auf derselben Seite, und die Adresse bekommt ?ts_event=sommerfest. Wie du stattdessen eigene Seiten nutzt, steht unter Ganzer Shop und eigene Seiten.

Häufige Fragen

Kann ich vergangene Events zeigen?

Nein, Liste und Kalender zeigen nur, was noch kommt. Abgesagte Termine bleiben im Kalender sichtbar, bis ihr Datum vorbei ist.

Woher weiß ich, wie die Teile heißen?

Jedes Teil trägt eine feste Klasse, die mit ts- beginnt. Die wichtigsten stehen unter Gestalten, alle siehst du mit den Entwicklertools deines Browsers.