Schedule Meeting Dialog Block for React

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.

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.

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.

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.

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 passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

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.