--- title: "TYPO3 Event Teaser List: Veranstaltungen anzeigen in toujou" url: "https://www.toujou.com/service/element-library/event-teaser-list/" description: "Das toujou-Element Event Teaser List zeigt mehrere Veranstaltungen auf der TYPO3-Website gebündelt an. ✔ Anleitung ✔ Hinweise & Tipps." date: 2021-02-15 modified: 2026-01-16 --- # TYPO3 Event Teaser List: Veranstaltungen anzeigen in toujou 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Events](https://www.toujou.de/service/element-library/events/) 5. [Event Teaser List](https://www.toujou.de/service/element-library/event-teaser-list/) 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](#c1009276) [Step by step guide](#c1009278) [Screen adaption](#c1009283) --- ### Sample view 1. ![Eine stilisierte Fabrikszene mit Maschinen, die Produkte auf einem Förderband verarbeiten, umgeben von hellen Farben.](https://www.toujou.de/_assets/processed/QgbzZOHilZ2MhpYOPMR7iSYXYubLgzAVE-nLne-75GQ/q:85/w:291/h:121/fn:Y3NtXzE5MjB4ODAwX1dlYi1oZWFkZXJfYXNzZW1ibHktc2hvcnRfYjY5ZTkzYmY0Zg:t/cb:e4230ca981b4a3a03102c6bc82a9211e7021725b/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX1dlYi1oZWFkZXJfYXNzZW1ibHktc2hvcnQucG5n) ### Event 1 Event 30.11.2028 Scheduled 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. [ Read more ](https://www.toujou.de/service/element-library/widgets/event-teaser-list/event-one/) 2. ![Eine farbenfrohe, stilisierte Fabrik mit Maschinen und Arbeitern, die an verschiedenen Stationen beschäftigt sind.](https://www.toujou.de/_assets/processed/7Dq3ltPuJXyLxYYXX7-5JoEvcmn6uxpa2sTS6GYIRtM/q:85/w:291/h:121/fn:Y3NtX2Fzc2VtYmx5X2xpbmVfMXhfMzdhZjg1ZDA1NA:t/cb:e50e01bd32099aa65c20e1dcaf4e8b5a93311447/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsva29sbGVrdGlvbmVuL2Fzc2VtYmx5X2xpbmVfMXgucG5n) ### Event 2 Event 06.12.2028 Scheduled 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. [ Read more ](http://www.toujou.de/tutorials/seiten-anlegen/events) 3. ![Eine farbenfrohe, stilisierte Szene mit verschiedenen Maschinen und Figuren, die in einer kreativen Umgebung arbeiten.](https://www.toujou.de/_assets/processed/TZgj39N19q61yh9UE-8lDGAhcWh0CBYNLpQwxKBfY24/q:85/w:291/h:121/fn:Y3NtXzE5MjB4ODAwX3dlYmhlYWRlcl9hc3NlbWJseV9saW5lX3R1ZXJraXNfMDFfMTIxNzYwZWYzNg:t/cb:5accec2d07d7cd030050b69544ff0a620f5aa001/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX3dlYmhlYWRlcl9hc3NlbWJseV9saW5lX3R1ZXJraXNfMDEucG5n) ### Event 3 Event 20.12.2028 Scheduled 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. [ Read more ](https://www.toujou.de/service/element-library/widgets/event-teaser-list/event-3/) --- Step 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. [ TYPO3-Tutorial »Events«](https://www.toujou.de/service/tutorials/pages-navigation/events-in-toujou/) ### 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](https://www.toujou.de/service/tutorials/pages-navigation/events-in-toujou/)«.** **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.