React Demo Scheduler
Most booking widgets ask only when. Asking what first is what turns a booked slot into a useful meeting: it routes the call to the right engineer and tells them what to prepare.
What would you like to cover?
Pick a day
Available times
Installation
Props
| Prop | Type | Description |
|---|---|---|
| days | DemoSlotDay[] | { label, weekday, day, slots, disabled? } |
| agendas | AgendaPreset[] | { id, label, description, minutes } |
| referenceTimezone | string | Timezone the slots are expressed in |
| timezones | string[] | Offered in the selector |
| onSubmit | (booking) => void | { day, time, agenda, timezone, email } |
Dates are strings, deliberately
DemoSlotDay carries label, weekday, and day as pre-formatted strings rather than a Date. Formatting a date in a statically exported app means the server's timezone and locale decide the output, and the browser then disagrees — the exact hydration-mismatch class this library avoids elsewhere. Your backend knows the real availability; let it emit display strings.
Be explicit about timezone
Slots are listed in referenceTimezone, and choosing a different timezone shows a plain warning rather than silently converting. Half-converted times are how meetings get missed. If you do convert server-side, convert the slots themselves and update referenceTimezone to match — never leave the label and the numbers describing different zones.
Availability here is static input. Wire onSubmit to your real calendar and re-fetch days after booking, or two people will take the same slot.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.