schachbulle / contao-countdown-bundle

2.0.0 2026-09-02 17:52 UTC

Requires

• php: ^7.4 || ^8.0
• contao/core-bundle: ^4.13 || ^5.3

Requires (Dev)

• contao/manager-plugin: ^2.0

Conflicts

• contao/core: *
• contao/manager-plugin: <2.0 || >=3.0

LGPL-3.0-or-later

• Frank Hoppe

• contao
• countdown
• zeit
• termin

Published on Packagist.org on 2026-09-02 17:53 UTC

README

Inhaltselement für Contao, das die verbleibende Zeit bis zu einem Termin in Tagen, Stunden, Minuten und Sekunden herunterzählt.

Voraussetzungen

• Contao 4.13 LTS oder Contao 5.3 und neuer
• PHP 7.4 oder neuer (geprüft bis PHP 8.4)

Das Bundle läuft mit beiden Contao-Fassungen aus derselben Quelle; eine eigene Ausgabe je Fassung ist nicht nötig.

Installation

Über den Contao Manager das Paket schachbulle/contao-countdown-bundle hinzufügen, oder auf der Kommandozeile:

composer require schachbulle/contao-countdown-bundle

Verwendung

Im Backend unter Artikel ein neues Inhaltselement anlegen und als Typ Countdown wählen. Es gibt zwei Einstellungen:

Feld	Bedeutung
Countdown-Ende	Datum und Uhrzeit, auf die heruntergezählt wird. Ohne Angabe gibt das Element nichts aus.
Stil	Farbschema der Anzeige: Blau, Grün oder Rot. Ohne Angabe gilt Blau.

Das Herunterzählen läuft im Browser des Besuchers. Die Seite muss also nicht neu geladen werden, und der Seitencache von Contao steht der Anzeige nicht im Weg: Im Markup steht nur der Zieltermin, nicht die Restzeit.

Anpassung

Template

Das Template ce_countdown.html5 lässt sich wie üblich in den Ordner templates/ des Projekts kopieren und dort ändern. Wichtig ist allein, dass das Wurzelelement das Attribut data-countdown-finish mit dem Zieltermin nach ISO 8601 behält und darunter je ein Element mit den Klassen days, hours, minutes und seconds liegt — daran findet das Skript die Felder.

Über das Feld Eigenes Template im Reiter Template-Einstellungen lässt sich auch eine eigene Ableitung (ce_countdown_meins.html5) auswählen.

Gestaltung

Das mitgelieferte default.css bringt die Grundgestaltung und die drei Farbschemata mit. Am Element stehen immer zwei Klassen: clockdiv für Aufbau und Schriftgrößen sowie clockdiv_1 bis clockdiv_3 für die Farbe. Eigene Regeln im Theme überschreiben beide.

Ist der Termin erreicht, bekommt das Element zusätzlich die Klasse expired und die Anzeige bleibt auf null stehen.

Hinweise

• Das Skript kommt ohne jQuery und ohne MooTools aus. Es spielt also keine Rolle, welche Bibliotheken im Seitenlayout eingeschaltet sind.
• Stylesheet und Skript werden nur auf Seiten geladen, auf denen tatsächlich ein Countdown steht.
• Mehrere Countdowns auf einer Seite sind möglich; jeder zählt für sich.

Lizenz

LGPL-3.0-or-later, siehe LICENSE.

Autor

Frank Hoppe, schachbulle.de