Content Scheduler 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 header's Schedule post 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 SlotFields component and share the block's state, so what you set in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Everything. Scheduling adds a chip to the drawn week in local state and says in a polite status message that nothing was posted; no request goes out and no clock is read. In your app send the date, the time, the zone and the channel ids to your queue in schedule, have the server turn them into one instant, and draw the chip from its response. Keep the checks that live in the dialog: at least one channel, and no slot in the past.

Each zone has its offset from UTC on the typed day: Lisbon plus one, New York minus four, Tokyo plus nine. The time you pick is read in the chosen zone, and the two others are worked out by adding the difference in hours, with a note when the day changes, such as "04:30 (day before)". Offsets are typed rather than read from the browser so the sentence is the same everywhere; in your app use your date library's zone data, because offsets change with daylight saving.

Days before the typed today (Friday 9 October 2026) are closed in the calendar. For today itself the block compares the slot, in its zone, with the typed present, 14:30 in Lisbon, and shows "That time has already passed." under the summary instead of scheduling. Turning every channel off shows "Choose at least one channel." in the same line. Schedule post does nothing while a line shows.

Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape, Cancel and the close button return focus to the header button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus back on the header button. The calendar's days, the best times and the half-hour list are all reachable with the keyboard, and each switch is named for the channel it controls.

The three panes become one column in the order you use them: the day, the time, then the summary and channels. The copy shown on load docks to the foot of the page as a bottom sheet with Schedule post pinned at the bottom and the panes scrolling above it; the best times lie in a row. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.