HappenBoard Pro adds three blocks for showing events: Events Photo Grid, Events Tile View and Schedule / Timetable. They work with any theme, and the preview in the editor matches the page.
These blocks are part of HappenBoard Pro. See what Pro adds.
You find them in the HappenBoard category of the block inserter, next to the free blocks described in the blocks overview. The clustered map has a guide of its own.
Choose the events to show
Each block picks its events with a Date range setting in the sidebar:
- Upcoming: the next events from now on. The default for the photo grid and the tiles.
- Today: from midnight to midnight, in your site’s timezone.
- This week: seven days from the first day of the week set in WordPress under Settings → General.
- This month: the current calendar month.
Only published events appear, and a cancelled date of a series is left out. A recurring event shows once per date in the range, so a weekly class can fill several cards.
These blocks have no category, tag or venue setting, and the Filter Bar does not filter them. For a listing visitors can narrow down, use the Event Query Loop block.
Headings, images and venues
- Headings: event titles in the photo grid and the tiles, and day headings in the timetable, are level 2 headings by default. If the block sits under a heading of its own, choose level 3 to 6 with the heading level button in the block toolbar. Screen reader users then get a clean page outline.
- Images: each card loads a copy of the featured image sized for its column, not the full-size file, so the page stays light.
- Venues: the venue line shows the venue linked to the event. For an imported or submitted event with no linked venue, it shows the venue name typed on the event.
Events Photo Grid
An image-first grid. Each card is the event’s featured image, with the date, the title and the venue laid over the bottom of it. The whole card links to the event.
| Setting | What it does | Default |
|---|---|---|
| Number of events | From 1 to 48. | 12 |
| Columns | From 1 to 6. Tablets show 2 columns at most, phones 1. | 3 |
| Aspect ratio | Square, the 4:3 shape, Widescreen 16:9 or Portrait 3:4. Every card gets the same shape, whatever the photos. | 4:3 |
| Overlay | Always visible, Reveal on hover (the text also appears when a keyboard user reaches the card) or Hide overlay. | Always visible |
The Layout panel holds these four settings, the Filtering panel the Date range, and the Content panel Show date and Show venue (both on). An all-day event shows All day instead of a time.
The text sits on a dark band at the bottom of the card, so white text stays readable on a light photo. The rest of the photo is not darkened. With Hide overlay, cards show the photo alone, with no title or date. Screen readers still read the date, title and venue of each card.
Give your events a featured image before you choose this block. An event without one gets a plain dark card with its text.
Events Tile View
Large rows with the image on one side and the text on the other. Good for a few highlighted events at the top of a page.
| Setting | What it does | Default |
|---|---|---|
| Number of tiles | From 1 to 12. | 3 |
| Columns | Single column or Two columns. | Single column |
| Image position | Left of content, Right of content or Alternate (zig-zag). | Left of content |
| Show image, Show date, Show venue, Show excerpt | Each part of the tile. An event without a featured image gets a tile without the image. | All on |
| CTA label | The text of the button at the end of each tile. Leave it empty to hide the button. | Learn more |
The Date range is in the Filtering panel. If your site is not in English, type your own CTA label. On screens 781 pixels wide or less, tiles stack in one column, image above text.
Schedule / Timetable
A conference-style timetable: one column per day that has events, hours down the side, and each event drawn as a block as tall as its duration. Days without events get no column. Clicking an event opens its page.
Events that overlap sit side by side in their day’s column. An all-day event takes the first row, labelled All day.
| Setting | What it does | Default |
|---|---|---|
| Start hour (24h) | The first hour of the grid, from 0 to 23. | 8 |
| End hour (24h) | The last hour, up to 24. Always at least one hour after the start. | 22 |
| Slot granularity | The size of a row: 15 minutes, 30 minutes or 1 hour. | 30 minutes |
| Date range | Today, This week or This month. There is no Upcoming option, because a timetable needs a start and an end. | This week |
| Show venue | Adds the venue under each event. | On |
The hours are in the Day window panel and the range in the Range panel. The Display panel also has an Accent color picker, the background of each event block, blue by default.
An event that runs past the start or end hour is cut to fit, with a dashed edge on the cut side. An event entirely outside the window is not dropped: it sits at the nearest edge, with a dashed border, and its own times show the real hours. The grid covers 31 days at most and reads 100 events at most.
On screens 600 pixels wide or less, the grid becomes a day-by-day list: each day heading followed by its events, one per row.
When there is nothing to show
Rather than disappearing, each block prints a short line, so you notice it in the editor. The photo grid and the tiles say No events match the current filters. The timetable says No events scheduled in this window.
Next steps
- Event listing blocks: the free lists and grids, which the Filter Bar can filter.
- Clustered map and Map Design Studio: show the same events on a map.
- Building a single event page: the page each card and tile links to.
- What Pro adds: the other Pro features.