shadcn.io is not affiliated with official shadcn/ui
Schedule Meeting Dialog Block for Solid
A month page with its new event dialog shown open: a title, a day from a folded calendar, a start time and length, guest emails as tags, and a day timeline that moves with the time and warns when the meeting clashes.
Installation
Overview
Make a meeting against the day it will land on, with this schedule dialog for Solid with Ark UI. It opens from the October page of Slotfern, a scheduling tool: the page's header holds an outline New event Button, and the month, five weeks of day cells with grey bars on the busy days, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The wide Dialog has a title, the day (a button that folds an inline Calendar open, days before "today" closed), a start time in 15-minute steps from a Select, a length in a Segment Group (30, 45 or 60 minutes), guest emails as Tags Input chips, a Switch for a video link and a Textarea. Beside the form a day timeline runs from 09:00 to 18:00 with the day's three other events as grey blocks and the new meeting ringed; it moves as the time and the length change and says, politely, when they clash ("Overlaps Standup by 15 minutes"). Create event is the only Shine Button, and a clash does not block it: it puts a chip with the meeting on that date of the month. For preview the dialog is drawn open in place when the page loads; the header's button opens the real dialog.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The New event button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same MeetingFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How does the timeline find a clash, and why doesn't it block?
The day's other events are typed by weekday in the file (a weekend is free), and the new meeting is compared with each: the minutes the two share become the sentence, such as "Ends 10:15. Overlaps Standup by 15 minutes." Two meetings at the same time are sometimes right, so a clash is a warning and Create event stays enabled. The sentence is said once, 600 ms after you stop changing the day, the time or the length, and only when its words change. In your app compare against the person's real calendar.
How do the guests work?
Type an address and press Enter or a comma to make it a chip; leaving the field adds it too. A pasted list becomes several chips. Up to eight guests, and an address that isn't an email or is already there is refused with the reason under the field. Remove a chip with its own button. Nothing is sent: the addresses are only kept in this page's state, and the email domain in the file is made up.
What stays local, and how do I wire it for real?
Everything. Create event adds a chip with the title and start time to the drawn month on that date and says so in the polite status; no invitation, calendar entry or video link exists. In your app send the title, the day, the start, the length, the guests and the video choice to your calendar service, create the link there, and show what it returns. The dates are written with Intl.DateTimeFormat in UTC and "today" is a typed constant.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts on the title, and Escape, Cancel and the close button return focus to New event. The day button says whether the calendar is open (aria-expanded), the calendar is a real grid with the arrow keys, and choosing a day returns focus to the button. The timeline is decoration; the same events are in a list for a screen reader. The trigger is the button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange.
How does it look on a phone?
The form is one column and the timeline folds under the time as See the day, a button that opens it; the clash sentence stays visible without opening it. The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the form scrolling above them, title first. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen that scrolls inside.