Greenroomevents calendar dashboard template
An events calendar dashboard template for scheduling and venue-operations products, built on a calendar you can operate from the keyboard.
- 128 / 128
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs — install, use, customizepages, composed from 11 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- August at Quarry Hall/
- app-shell
- schedule
- today-rail
This week, hour by hour/week- app-shell
- schedule
Hollow Bell/event- app-shell
- event-detail
- hold-ledger
Holds waiting on a decision/holds- app-shell
- holds-queue
Can we take this on?/new- app-shell
- booking-form
Strands and rooms/programme- app-shell
- strand-list
The parts/components- app-shell
Seven routes ship: a month overview with tonight's run order beside it, a week view with an hour grid, a booking detail, a holds work queue, a booking form, a programme settings page, and a living component styleguide. The month grid is an ARIA grid with one tab stop and the cell-entry pattern the specification writes: arrows walk days and weeks, PageUp and PageDown walk months, Enter steps into a day and moves focus to its first booking, Escape steps back out, and walking off the end of the month pages it. Minimum and maximum dates disable paging and arrow movement. Its signature is the occupancy tail: every public booking shows the hours the room is committed for, load-in to strike, so a 19:30 show reads as the 13:30 commitment it creates. In the week view that is a block whose height is the hold with the public hours banded inside it; on the detail page it is a four-mark ledger. Six programme strands carry the calendar's colour. A cancelled booking is struck through, a pencilled one has a dotted edge, and every strand has a dot and a name. The state layer includes filters that preserve themselves and tell a no-result from a first use, a form that validates on submit, focuses an error summary, keeps valid values and leaves a durable receipt rather than a toast, and a permission boundary explained in words instead of a dead disabled button. Every figure on every route derives from one fixture file, so no two pages can disagree about the same show. The palette has 128 tokens per mode, with its structural ramp authored in OKLCH on one neutral hue. Every pair is computed against its contrast tier, and the receipt reads the shipped stylesheet. Self-hosted Nunito, Figtree and Azeret Mono. Built for Tailwind v4, Next.js 15 and React 19; every colour lives in theme.css.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project.
ui/event-calendar
src/components/ui/event-calendar.tsx
tt-ui event calendar — month, week and agenda
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
The occupancy tail: every public booking draws the hours the room is genuinely held — load-in to strike — around the solid band of its public hours. In the week view the block's whole height is the hold, with the public hours banded inside the hatched field; on a month chip it is a doubled leading edge; on /event it is a four-mark ledger of load-in, doors, curfew and strike. holdFor() computes all three from the booking's own minutes and throws on one that claims a hold with no public hours to hang it off, so an uncited hold cannot be published.
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.333.
Greenroom
An events calendar dashboard template for scheduling and venue-operations products, built on a calendar you can operate from the keyboard.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Nunito
- text
- Figtree
- mono
- Azeret Mono
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.
every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdAdd a Greenroom route with one operator job, the real AppShell fill/rail pattern, truthful manifest and styleguide wiring, an HTML twin, and current gates.
- add-section/SKILL.mdAdd a Greenroom section or composition surface with fixture-derived facts, manifest and styleguide registration, an independently authored HTML twin, and current gates.
- check-quality/SKILL.mdRun Greenroom's real repository gates, then audit its 7-route twin editions, 20-row manifest, 31-file tt-ui inventory, fixture spine, calendar keyboard model and visual invariants.
- rebrand/SKILL.mdRebrand Greenroom across its 128-token light and dark tables, six strand families, three local typefaces, HTML edition and computed AA receipt.
- src/
- theme.css128 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/7 files
- components/11 files
- ui/9 files
- fonts/3 font files, 3 licences, 1 markdown file
- app/7 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/7 compiled routes, deploy-ready — no build step
- src/the Nunjucks source the routes compile from
- scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
20 components, 7 pages and 128 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard licence coversactivity
- v1.0.0 — seven-route events calendar console: month, week and agenda over one fixture spine, the occupancy tail on three routes, and the catalog's first keyboard-complete calendar
- the vanilla calendar twin, and the framework-free HTML edition it unblocksplanned
- a room-conflict view once buyer demand names oneplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.
