02examples
Examples
One component, many products — each example a live calendar with its source beside it, grounded in the real API.
Every example on these pages is the real <Kloq> running in the page with an
ephemeral store, and the code shown is the code that renders it — copy it out
and it works. They are grouped by what you are building: a product screen, a
data pipeline, a visual customisation, or an interaction.
01products
Products
Whole screens you would ship — a calendar dressed as a booking page, a roster, a public agenda.
- A Cal.com-style availability picker: busy time hatched and refused by constraints, click a free slot to book.
- Two accounts, five calendars, colour inherited from the calendar — with a calendar list that toggles each one.
- Four meeting rooms as timeline lanes — drag to book, drag across rooms to reassign, drag an edge to resize.
- Five people, one week, as timeline lanes — drag to schedule, drag across rows to reassign a shift to someone else.
- A public, read-only programme in 24-hour time with tracks as locations and a details sheet on click.
02data & sync
Data & sync
Where the events come from and where they go: servers, ranges, URLs, storage, files.
- Every change is committed to a fake server with latency and a reject switch; a rejection springs the block home.
- A controlled calendar that only holds what onRangeChange has fetched, merged page by page.
- Controlled view and date mirrored into the query string, so a link opens the same week and back/forward work.
- Uncontrolled events saved through your own adapter — here sessionStorage with a versioned payload and a per-tenant namespace.
03customization
Customization
Swap the visual pieces, run several calendars, change the clock the grid is drawn in.
- The calendar as one route of a product: sidebar nav, header, and a container that gives it a real height.
- A deploy pipeline drawn with its own EventBlock — status stripe, progress, and the engine contract honoured so drags still work.
- Draw the grid in any zone, add London / New York / Tokyo gutter columns, and keep each event's authored zone.
- A month overview beside a day view, both controlled by the same date — click a day on the left, it opens on the right.
04interaction
Interaction
Recurrence, commands, keys and natural language — the parts that make it feel like a product.
- Drop a .ics feed onto the calendar, then export what is on screen back out as a file.
- Weekday standups, a fortnightly review and a monthly payday — as RRULE strings, expanded live, edited this / following / all.
- Domain commands in the palette, Vim-style h / l / g on the keymap, and a row that lists the effective bindings.
- Type "lunch with Sam tomorrow 1pm" into a box above the grid; the parser underlines what it understood and the event lands.