SpaceClub! has a full event system with support for dates, times, locations, upcoming/past separation, featured events, galleries, and links to recap posts.
Each event is a Markdown file in the src/events/ folder.
Creating an Event
- Copy
src/events/template.md(an example event) and rename it (e.g.src/events/open-day.md). - Edit the front matter and content:
---
title: Open Day
description: Come visit us and see what we're all about!
eventDate: 2026-05-15
startTime: 10:00 AM
endTime: 3:00 PM
location: "Community Hall\n123 Main Street, Springfield"
image: /assets/images/open-day.jpg
---
We're hosting an open day! Come along and meet the team.
## What to Expect
- Tours of the space
- Free refreshments
- Live demos- Save the file. The event will appear on the events page and on the homepage.
Or skip the files entirely: in SpaceDash, go to Events and click New.
Front Matter Properties
| Property | Required | Description |
|---|---|---|
title | Yes | The event name. |
description | Recommended | A short summary shown on event cards and in search results. It also appears in search result previews and in SEO meta tags. |
eventDate | Yes | The event date in YYYY-MM-DD format (e.g. 2026-05-15). Used for sorting and determining upcoming vs. past. |
startTime | No | The start time (e.g. 10:00 AM, 14:00). Displayed on the event page and cards. |
endTime | No | The end time. Also used to determine if an event is still “upcoming” - an event is considered past once its end time has passed. If not set, the event is considered past after midnight on the event date. |
location | No | The venue or address. Supports multi-line with \n - use quotes around the value. |
locationLink | No | A map link (e.g. Google Maps). Makes the location clickable. |
image | No | Path to a header image shown on the event card (e.g. /assets/images/open-day.jpg). |
preview_image | No | A separate image for search result previews. |
featured | No | Set to true to mark as a featured event. |
recapPost | No | A recap post - its file name (e.g. open-day-recap) or its address (e.g. /posts/open-day-recap/). Displays a link to the post on the event page. |
gallery | No | Path to a folder of images to show as a gallery. See Gallery. |
hideEventDetails | No | Set to true to hide the date/time/location block under the title. You can then put it anywhere in the text with {% include "partials/event-details.njk" %} (in SpaceDash: the Event details block). |
Title and description matter beyond the event page itself. The title shows up in browser tabs, search results, and when links are shared. The description appears in search result previews and SEO meta tags. Even if you haven’t set up search yet, writing a clear title and description for every event is good practice from the start. See Search for how the search system uses these fields.
How Events Are Sorted
Events are automatically sorted and categorised:
- Upcoming events - Events whose end time (or end of day if no
endTime) is in the future. Sorted by date ascending (soonest first). - Past events - Events whose end time has passed. Sorted by date descending (most recent first).
The timezone used for this calculation is set in src/_data/site.json (timezone field).
Events Listing Page
SpaceClub! makes the /events/ page for you. It shows two sections:
- Upcoming Events - All future events.
- Past Events - All completed events.
There’s no file to edit. Your events also have a news feed at /events/feed.xml, so people can follow them in a feed reader.
Homepage Preview
The homepage shows your events and posts through the feed. See The Feed to change what it shows - for example, only upcoming events.
Featured Events
To feature an event:
---
title: Annual Gala
eventDate: 2026-12-01
featured: true
---To show only featured events and posts somewhere, use the feed with feedFeatured:
{% set feedTitle = "Featured" %}
{% set feedFeatured = "yes" %}
{% include "partials/feed.njk" %}Multi-line Location
Use \n for line breaks in the location. Wrap the value in quotes:
location: "Outer Space Hub\n101 Star Lane\nMeridian 7, Dione"This renders as:
Outer Space Hub
101 Star Lane
Meridian 7, Dione
Linking Events to Posts
You can link an event to a recap blog post:
In the event:
recapPost: /posts/open-day-recap/In the post:
eventPage: /events/open-day/Both pages will display a link to the other. See Posts for more details.
Adding Buttons
The btn.njk partial creates a styled button. To add a button anywhere in your event content, set variables immediately before the include:
{% set text = "Register Now" %}
{% set link = "https://example.com/register" %}
{% set icon = "ticket-perforated" %}
{% set style = "primary" %}
{% include "partials/btn.njk" %}| Variable | Default | Description |
|---|---|---|
text | ”Back to Home” | Button label. |
link | ”/“ | The URL the button links to. |
icon | ”arrow-left” | Bootstrap icon name without the bi- prefix. See Bootstrap Icons. |
style | ”primary” | Bootstrap button style - primary, outline-primary, secondary, outline-secondary, etc. |
align | ”center” | Alignment - start, center, or end. |
You can add as many buttons as you like anywhere on the page, each with different settings:
{% set text = "Register Now" %}
{% set link = "https://example.com/register" %}
{% set icon = "ticket-perforated" %}
{% include "partials/btn.njk" %}
{% set text = "View Location" %}
{% set link = "https://maps.google.com" %}
{% set icon = "geo-alt" %}
{% set style = "outline-primary" %}
{% include "partials/btn.njk" %}The event layout also automatically includes a default btn.njk (“Back to Home”) at the bottom of every event page. To change that default, copy the layout into your site with npx spaceclub customize layouts/event.njk and edit your copy (see Advanced Customisation).
In SpaceDash, buttons are the Button block in the + menu. See Buttons for every option.
Tips
- Filenames matter - The filename becomes the URL. Use lowercase with hyphens:
open-day.md→/events/open-day/. - Date format - Always use
YYYY-MM-DDforeventDatein front matter. The display format is controlled bysite.json. - The example event -
src/events/template.mdis a real event, dated far in the future so it stays upcoming. Change it into your first event, or delete it. - Time parsing - Use formats like
10:00 AM,2:30 PM, or14:00. TheAM/PMformat with a space before it works most reliably.
