Event Calendar

A section for anything your store does on a date. It has two shapes, and you pick one with a single Layout setting.

• Timeline — a tidy, dated list of what's coming up: workshops, launches, restock days, market stalls, order deadlines. Each entry is a date, a title, a line of description, and a link.
• Planting zones — a 12-month grid: the whole year at a glance, with the current month highlighted automatically and a hardiness-zone selector above it. This is the garden shape — the calendar a customer checks before they sow anything.

Both shapes are the same section, so you can start with a timeline and switch to the year grid (or back) without rebuilding anything.

Try it

Pick a preset to see its style, switch the Layout between the timeline and the 12-month grid, edit the heading, and change the list of hardiness zones — the preview follows. Use the screen-size and light/dark buttons in the preview header to check a phone and dark mode. The grid is a real, keyboard-operable calendar: click a month, then use the arrow keys (and Home / End) to move through the year. The example below is the Talamh (garden) planting calendar; the timeline layout works for any store.

←Event calendar

Color scheme

Layout

Timeline (default)Planting zones (12-month grid)

Heading

Hardiness zones (comma-separated)

USDA / RHS plant hardiness zones available in the selector. Default 5-9 covers temperate Europe.

related_article_handle — unsupported in docs panel (article)

Storefront preview

What to sow, plant, and harvest

Hardiness zoneZone 5Zone 6Zone 7Zone 8Zone 9

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

How it works

Add the Event calendar section to any page, then set Layout:

• Timeline (default) — add one Event block per entry. Each block is a date, a title, a description, and an optional link. They render in the order you arrange them, so you control the sequence.
• Planting zones (12-month grid) — no blocks needed. The section draws all twelve months itself, highlights the month you're in, and puts your list of hardiness zones in a selector above the grid. This is the layout behind the Talamh preset's /pages/planting-calendar page.

The month names come from your store's language — all 50 locales ship translated, so a French shopper sees janv. and an Irish shopper sees Ean. You never type the months in yourself.

Composition — Timeline

   Section heading

┌────────┬───────────────────────────────────┐
│ 15 Mar │ Spring seed swap — Cork           │
│        │ Bring a packet, take a packet.    │
│        │ Reserve a place →                 │
└────────┴───────────────────────────────────┘
┌────────┬───────────────────────────────────┐
│ 11 Apr │ Raised-bed build workshop         │
│        │ Two hours, one finished bed.      │
│        │ Book the workshop →               │
└────────┴───────────────────────────────────┘

Composition — Planting zones

   Section heading                    Hardiness zone
   Read more →                        [ Zone 8      ▾ ]

┌────┬────┬────┬────┬────┬────┬────┬────┬────┬────┬────┬────┐
│JAN │FEB │MAR │APR │MAY │JUN │JUL │AUG │SEP │OCT │NOV │DEC │
│    │    │    │    │    │    │▓▓▓▓│    │    │    │    │    │  ← current month
└────┴────┴────┴────┴────┴────┴────┴────┴────┴────┴────┴────┘

On desktop the twelve months run in a single row. On the Talamh preset the heading and the read-more link hold the left with the zone selector top-right, as sketched above; the other presets stack the heading, link, and selector above the grid. On a phone the whole thing stacks — the months fall into a 6-column grid, and on Talamh into a 3-column grid of large, tappable tiles.

Section settings

Setting	What it does
Color scheme	Colours the whole section — background, text, tiles, and links — from one scheme, so contrast stays legible in light and dark mode.
Layout	Timeline (default) for a dated list of Event blocks. Planting zones (12-month grid) for the year-at-a-glance calendar with the zone selector. This is the one switch between the two shapes.
Heading	The section title (e.g. "What to sow, plant, and harvest", "What's on this season"). Leave it blank to hide it.
Hardiness zones (comma-separated)	The zones offered in the selector, e.g. 5,6,7,8,9. Type your own list — H3,H4,H5 for RHS zones, or 3,4,5,6,7,8,9,10 if you ship across a wider range. Planting-zones layout only.
Metafield namespace	Advanced. Names the metafield namespace this section reads niche data from (default uisce_talamh). Leave it alone unless a developer tells you otherwise. Planting-zones layout only.
Related article	Optional. Pick a blog post to link under the heading — it renders as a "Read more" link. Clear the selection to hide the link. The link shows on the planting-zones layout.

The zones and namespace settings only appear in the editor when Layout is set to Planting zones — the timeline has no zones or grid, so the theme hides them rather than showing you settings that do nothing. The related-article picker stays visible in both layouts; its link renders on the planting-zones layout.

Event settings (one per block — timeline layout)

Setting	What it does
Date	The date chip on the left (e.g. "15 Mar", "Sat 11 Apr", "Autumn 2026"). It's free text — write it the way your customers read it.
Title	The event name (e.g. "Spring seed swap — Cork").
Description	One or two lines about the event. Leave blank to hide it.
Link text	The call-to-action under the description (e.g. "Reserve a place"). Leave blank to hide the link.
Link URL	Where the link goes — a product, a collection, a page, or an external booking form. Only appears once you've entered link text.

The current month is automatic

In the planting-zones layout the theme reads today's date and marks that month itself — you never set a "current month" and you never have to remember to change it. On 1 July the July tile lights up on its own. It's also marked up for screen readers (aria-current="date"), so a shopper using a screen reader hears "July, current" as they move across the year.

The Talamh signature — a field of earth tiles

Every preset gets the same working calendar; Talamh (garden) gives it the earth treatment, and it's the preset this section was built for.

The twelve months become a field of soil tiles — a warm-loam surface with a hairline terracotta rim and a squared corner, each carrying a decorative two-tone soil-strata accent along its base: moss-green topsoil over terracotta subsoil, the same cross-section stripe you see under the header navigation. The month you're in is seated down into the soil: a golden-harvest wash, a forest-green top edge, and an inset shadow, like a seed pressed into a bed. The hardiness-zone selector is a grounded, pressed-into-soil control in the same loam and terracotta. Nothing about the calendar's behaviour changes — the decoration sits on top of the same grid, the same keyboard navigation, and the same current-month logic.

Preset	Treatment
Talamh	The signature earth-tile field — warm-loam tiles, terracotta rims, the two-tone soil-strata accent, and the current month seated down on a golden-harvest wash. The timeline layout gets a loam date chip with a terracotta underline.
Uisce	Clean, calm tiles on a cool ground.
Gaoth	Warm, rounded tiles for pet and lifestyle stores.
Tine	Sharper, industrial tiles for trade and hardware.
Neart	Soft, premium tiles for calm wellness stores.

The section is available in every preset — a bakery can run the year grid for its seasonal menu, and a garden shop can run the timeline for its workshops. The earth decoration is the Talamh flavour, not a requirement.

Realistic examples

• A garden shop (the Talamh demo). Heading: "What to sow, plant, and harvest". Zones: 5,6,7,8,9 (temperate Europe). Related article: the month-by-month planting guide post, so the "Read more" link drops the shopper straight into it. The customer lands on /pages/planting-calendar, sees the current month already highlighted, picks their zone, and reads the guide beneath.
• A nursery shipping across the UK and Ireland. Zones H3,H4,H5,H6,H7 (the RHS scale a UK gardener recognises) instead of the USDA numbers.
• A seed supplier's workshop diary. Layout set to Timeline: "15 Mar — Spring seed swap", "11 Apr — Raised-bed build workshop", "02 Oct — Garlic planting weekend", each linking to a booking page.
• A shop with order deadlines. Timeline again: "12 Dec — Last day for pre-Christmas delivery", linking to the collection you want cleared.

Responsive & accessibility

• The grid is a real, keyboard-operable calendar. Tab into it once (only the current month is a tab stop — the standard "roving tabindex" pattern, so the calendar never traps a keyboard shopper in twelve stops), then use the left/right arrow keys to step month by month, up/down to jump six months, and Home / End to reach January or December. It follows the WAI-ARIA Grid pattern, so screen readers announce it as a grid and read the current month as "current".
• Large tap targets — on the Talamh preset the month tiles are generous, at least 44 px on a phone, and fall into a 3-column layout so nobody has to hit a sliver; the other presets keep a compact 6-column grid.
• Visible keyboard focus — a clear focus ring on every month tile and on the zone selector; never removed.
• Respects reduced motion — the tiles' hover transition is switched off for shoppers who ask for reduced motion. The calendar works exactly the same.
• Right-to-left ready — the grid, the date chips, and the selector all flow correctly in Arabic, Hebrew, Persian, and Urdu.
• One color scheme — the whole section is painted from a single scheme, so text never lands in a low-contrast surprise, in light or dark mode. On the Talamh preset the earth tiles are fully opaque, so the grid never dissolves into the background in dark mode.
• Every string is translated — the month names, "Hardiness zone", "Zone 8", the grid's screen-reader label, and the "Read more" link all ship in all 50 locales.

Tips

• Set the zones your customers actually live in. Five is plenty. A twelve-entry selector is a menu nobody reads.
• Point the related article at a published post. If the selected article is unpublished or removed, the theme renders no link at all (rather than a broken one) — so if your "Read more" link is missing, check the selected post.
• Keep timeline descriptions to one line. The date chip and the title carry the meaning; the description is a nudge.
• Write dates the way your customers say them. The Date field is free text — "15 Mar", "Sat 11 Apr", "Late spring" all work.
• Don't touch Metafield namespace unless a developer has asked you to. It's plumbing, not content.
• Use the year grid as a landing page. In the Talamh demo it's a page of its own (/pages/planting-calendar) with the month-by-month guide written underneath it — the grid orients, the prose explains.