shadcn.io is not affiliated with official shadcn/ui
Meeting Scheduler Chat Block for Solid
A thread with a colleague who proposes three slots, beside a week grid where pressing a time answers, a counter-proposal appears outlined, and an accepted time becomes a confirmation card.
Installation
Overview
Settle a meeting time by talking and pointing, with this meeting scheduler chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height with two large panes for Gridmeet, a meeting scheduler: a thread with Marek Vasko, who wants half an hour this week, and the week of 12 October as a grid of five days by four times. His three proposals are outlined and named "proposed", your busy times are hatched and named "busy", and every cell is a button named with its day, time and state. Pressing a proposed time answers "Wed 14:00 works for me", pressing a free one posts "How about Wed 15:00?", and typing a day and a time does the same. Marek's typed answers accept the times he is free or counter with the next one, which then appears outlined; an accepted time becomes a confirmation card in the thread, "Confirmed: Wed 14 Oct, 14:00 to 14:30", with the honest line "Nothing was booked". Replies come after a Typing Indicator Text, the composer's Shine Button is the only colored control, and on a phone a Toggle Group switches between Chat and Week. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a booking assistant, a scheduling thread or any conversation that ends in a time.
FAQ
How is the week grid built, and is it accessible?
It is a plain table with a screen-reader caption, day headings and a time heading per row, and each cell holds a real button. The button's name is the day, the time and the state ("Wed 14:00, Proposed"); the state is also a visible word, so hatching and outlines are never the only signal. Busy cells are aria-disabled rather than disabled, so they stay in the tab order and explain themselves when pressed.
How does Marek decide?
MAREK_FREE lists the four times he is free. A time in that list is accepted and confirmed; any other gets a counter-proposal, the next free time after it in the week, written as "I'm in a review then. Thu 10:00?" and added to the outlined proposals. A message that names no day and time gets a short typed nudge. Edit the lists to change his week and yours (BUSY).
Does it book anything?
No. Confirming adds a card to the thread and marks the cell "Booked", and every line says nothing was booked. To make it real, create the event on your server where post is called, then show the card from the event you get back. The related Event Invitation block shows a downloadable calendar file.
What stays in the page?
All of it: the messages, the counter-proposals and the confirmation live in component state, and the replies come from a typed script. Start over resets the thread and the week.
Is it usable with a keyboard and a screen reader?
Every cell is reachable with Tab, the log is a focusable region announced as a log, and one status line under the window says what changed, including when you press a busy time. Pressing a cell on a phone moves to the Chat pane so the result is on screen.
Does it handle time zones?
No, both people are in one zone here. Time Zone Coordinator slides a time across four clocks for a team that spans several.