02examples
Examples
Sixteen ways to use one component — each a live calendar with the 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.
- Booking calendarA Cal.com-style availability picker: busy time hatched and refused by constraints, click a free slot to book.constraintsisSlotDisabledslotAllowedonSlotClick
- Team calendarTwo accounts, five calendars, colour inherited from the calendar — with a calendar list that toggles each one.registerCalendarAccountCalendarListcalendarIdresolveEventColor
- Room bookingFour meeting rooms as timeline lanes — drag to book, drag across rooms to reassign, drag an edge to resize.viewlaneslaneAdapterbyResourceId
- Shift schedulerFive people, one week, as timeline lanes — drag to schedule, drag across rows to reassign a shift to someone else.viewlaneslaneAdaptertimelineWindow
- Conference agendaA public, read-only programme in 24-hour time with tracks as locations and a details sheet on click.readOnlyhour12localecomponents
02data & sync
Data & sync
Where the events come from and where they go: servers, ranges, URLs, storage, files.
- Optimistic server syncEvery change is committed to a fake server with latency and a reject switch; a rejection springs the block home.onCommitKloqChangedefaultEvents
- Lazy-load by date rangeA controlled calendar that only holds what onRangeChange has fetched, merged page by page.onRangeChangerangePaddingeventsonEventsChange
- View and date in the URLControlled view and date mirrored into the query string, so a link opens the same week and back/forward work.viewdateonViewChangeonDateChange
- Custom persistence adapterUncontrolled events saved through your own adapter — here sessionStorage with a versioned payload and a per-tenant namespace.persistencestoragePersistenceAdapterreadPayload
03customization
Customization
Swap the visual pieces, run several calendars, change the clock the grid is drawn in.
- Calendar in an app layoutThe calendar as one route of a product: sidebar nav, header, and a container that gives it a real height.classNamechildrenuseKloqKloqToolbar
- Custom event renderingA deploy pipeline drawn with its own EventBlock — status stripe, progress, and the engine contract honoured so drags still work.componentsEventBlockPropsregisterNodeuseKloqSettings
- Multiple time zonesDraw the grid in any zone, add London / New York / Tokyo gutter columns, and keep each event's authored zone.displayTimeZonetimeZonestimeZoneonTimeZonesClick
- Linked month and day viewsA month overview beside a day view, both controlled by the same date — click a day on the left, it opens on the right.dateonDateChangeeventsonEventsChange
04interaction
Interaction
Recurrence, commands, keys and natural language — the parts that make it feel like a product.
- ICS import and exportDrop a .ics feed onto the calendar, then export the visible week back out as a file.parseICSeventsToICSrangeOfViewdownloadICS
- Recurring events (RRULE)Weekday standups, a fortnightly review and a monthly payday — as RRULE strings, expanded live, edited this / following / all.rruledescribeRRulenextOccurrenceRRuleBuilder
- Custom ⌘K commandsDomain commands in the palette, Vim-style h / l / g on the keymap, and a button that opens the shortcut sheet.registerCommandskeymaponCustomizeKeybindsglobalShortcuts
- Natural-language event entryType "lunch with Sam tomorrow 1pm" into a box above the grid; the parser underlines what it understood and the event lands.parseQuickAddhighlightSegmentsquickAddPreviewuseKloqStore