Event Teaser List
The Event teaser list gives you the opportunity to display all the events that you have created on an event page for your website. This element displays multiple events as a list on one page, one below the other.
Sample View Step by step guide Screen adaption
Sample view
Jan
29
2026
Event 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Fürth Gustav-Weißkopf-Str. 5
detailsJan
30
2026
Event 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
toujou.de Gustav-Weißkopf-Str. 5, Fürth
detailsJan Feb
31 02
2026
Event 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Fürth Gustav-Weißkopf-Str. 5
detailsStep by step guide
Before you can use the Event teaser list element for the Frontend of your website, the events must first be added using the event pages. We will explain how to create events in toujou in this tutorial.
Create element
- Click the button + Content to create the Event Teaser List element.
Select element
- Select the Event Teaser List element in the Widgets tab.
Choose settings
- Select the settings of your element in the Event element type to determine the way you would like the events to be displayed. The listing of all of the following events will be pre configurated.
- To display past events activate the button Display past events.
Display options available for events
- Next events: With the option, next events are always displayed by their date and you can decide the number of events you’d like to display at once.
- Selected events: This display option allows you to select individual events manually.
- Manual defined date range: Only those events within your chosen date range will be displayed.
- Fixed period: This option allows you to pick a specific frequency of events within a longer pre-selected date range. Your options of frequency are: today, tomorrow, this week, next week, this month, next month.
Next events
- Specify the number of events that should be displayed at once by typing the amount in the textfield limit.
- Save your settings.
Selected events
- For a manual selection of individual events, type the event name in the events selection search field and then click on the event.
- Save the settings.
Manual defined date range
- Enter the start date and the end date by clicking in the field or on the calendar icon.
- Enter the maximum number of events displayed in the text field limits.
- Save your settings.
Fixed period
- To select the desired time unit from the various options click on the drop-down menu within fixed period.
- Save the settings.
Screen adaption
This element refers to data on the event page. The name of the event (in the example above event 1, event 2 and event 3) is generated from the respective page name. Date, medium, description, location and address come from the information you have stored in the event data tab in the page properties of the event page. A detailed description can be found in the TYPO3 tutorial »Events«.
Worth noting: You can link directly from the event teaser list to another page by placing an external link in the event data of the event page (i.e. event 2).
Responsive: In the mobile view the displayed text field (description) will be smaller and the stored medium will be played out in a different ratio. You can make any desired adjustments by using the image editor. The TYPO3 tutorial »image editing« can also guide you through the individual steps required.