The Event Countdown block shows a timer counting down to the start of an event, in days, hours, minutes and seconds. When the event starts, the timer gives way to a short message, and to another one once the event is over.
The block shows the event of the page it sits on. Place it in the template that all your events share, as explained in Building a single event page. HappenBoard’s default event page already includes it, with seconds hidden, on block themes and classic themes alike.
Add the countdown
- On a block theme, open your single event template in Appearance → Editor. To add a countdown to one event only, edit that event instead.
- Open the block inserter and add Event Countdown from the HappenBoard category.
- Set the units and messages in the block settings sidebar.
- Save.
On an ordinary page, the block has no event to count down to. The editor then shows a note asking you to move it into a single event template, and visitors see nothing.
Choose the units
The Units panel has one switch each for Days, Hours, Minutes and Seconds. All four are on by default.
Hide seconds for an event weeks away: a ticking seconds box distracts more than it helps. When you hide a larger unit, its time moves into the next one shown. With Days off, 3 days and 2 hours read 74 hours.
Reword the messages
The Labels panel holds the two messages that replace the timer:
| Setting | When it shows | Default |
|---|---|---|
| When live | From the start of the event to its end | Event has started |
| After end | Once the event is over | Event has ended |
Write anything that fits your event, such as “Doors are open” and “See you next year”.
What visitors see
Each unit is a box with its number, at least two digits long, above its name. The page arrives with the right numbers already in place, then the timer updates every second in the visitor’s browser, using the visitor’s device clock.
For a recurring event, the countdown targets one date. It is the date the visitor opened from the calendar or the list of dates, otherwise the date under way, otherwise the next one. Once the series is over, it shows the After end message. The Event Date & Time and Add to Calendar blocks on the same page use the same date.
Give the event an end time
An event without an end time ends the moment it starts. The countdown then goes straight to the After end message, and the When live message never shows. To show the live message while the event runs, give it an end time, as described in Dates, times and all-day events.
Style the countdown
The block has text and background color settings, padding and margin, font size, line height and font weight, and wide alignment. The numbers use your theme’s font.
To start from a ready-made layout, the Single event hero pattern combines the featured image, the title, the date, the countdown and the calendar links. See Patterns and Site Editor templates.
Next steps
- Building a single event page: arrange the rest of the event page around the countdown.
- The Add to Calendar block: add calendar links under the timer.
- The HappenBoard blocks: overview: see every block at a glance.