Event list and calendar

There are two blocks for the overview of your events: the list and the calendar. Both only show what's published, always as it currently stands in the dashboard.

Event list

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

Attribute	What it does
limit="6"	Shows at most this many events, such as the next six on your home page
category="concert"	Shows only this category, such as a page just for concerts

The categories are named as in the dashboard, as short English codes: concert, festival, party, theatre, musical, classical, comedy, dance, reading, film, exhibition, sports, kids, food, workshop, conference, tour, market, other.

Your own layout for every card

With nothing else set, each event gets a simple card. With a <template> you build it yourself. All blocks of an event work inside it:

<ts-event-list>
  <template>
    <article class="card">
      <ts-event-cover></ts-event-cover>
      <p class="date"><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="price"><ts-event-price></ts-event-price></p>
      <ts-event-link label="Tickets"></ts-event-link>
    </article>
  </template>
</ts-event-list>

Calendar

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

The calendar shows a month as a table. Each day lists its events as links, and clicking the day opens all its dates below, with time, venue and price. The week starts on the right day for the language. Many time slots on one day, as in a museum, appear as one entry.

Attribute	What it does
category="concert"	Shows only this category
month="2027-03"	Starts in this month

A monthly view needs a little CSS to look good on a phone. You could hide the event links there, which leaves a slim grid with the dates appearing below on click:

@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; }

Where does a click lead?

By default the visitor stays on the same page and the address gets ?ts_event=summer-fest. How to use your own pages instead is under Whole shop and your own pages.

Common questions

Can I show past events?

No, the list and calendar only show what's still to come. Cancelled dates stay visible in the calendar until their date has passed.

How do I know what the parts are called?

Each part has a fixed class starting with ts-. The most important ones are under Styling, and your browser's developer tools show them all.