shadcn.io is not affiliated with official shadcn/ui
Quick Add Calendar Command Menu Block for Svelte
A calendar app's command menu shown open over a drawn day: type lunch with Ana tomorrow 1pm and it reads a title, date, time and length, shows the day with the new block dashed, and Enter adds it; Day, Week and Month rows switch the drawn view.
Installation
Overview
Add an event by typing it as a sentence with this calendar command menu for Svelte with Ark UI. It opens from a drawn day in Dayloft, a calendar app, whose header holds an outline field with its ⌘ K cap, and the day is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command beside a pane. The field reads a sentence such as lunch with Ana tomorrow 1pm against a fixed today, Wed 14 Oct 2026, and the first row says what it will create. The pane shows the sentence as four chips (Title, Date, Time and Length, with "Not said" where the sentence left a part out), a note when it overlaps another block, and that day's timeline with the new block dashed. Enter adds the block to the drawn calendar behind the menu, which moves to that day. Day, Week and Month rows switch the drawn view, Today, Tomorrow and Next week move it, and on a phone the drawn week shows one day and the pane drops its timeline. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same sentence. For calendars, planners and any app that adds an item from one line of text.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a calendar day, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a sentence or a view in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
What can the sentence say?
A day: today, tomorrow, in 3 days, a weekday (the next one, or next Friday for the one in the week after this), or a date such as oct 20 or 20 oct. A time: 1pm, 13:00, 9:30am, noon or midnight. A length: for 45 min or for 2 hours. Everything left over is the title, with its first letter capitalised. What the sentence leaves out is shown as "Today", "09:00" and "60 min" in the muted chips, and as "Not said" for a missing title. All of it is read against the fixed TODAY, never the clock.
How does it notice an overlap?
clashOf compares the new block's start and end with every block on that day, and the note under the chips names the first it overlaps ("Overlaps “Design review” at 11:00"). It is a warning, not a refusal: Enter still adds the block, since a real calendar would let you double-book. The note has a reserved height of two lines, so it never moves the chips or the timeline.
How do the views and the drawn calendar work?
The Day, Week and Month rows set the view held in state, and the drawing behind the menu is a day timeline, seven columns with one timeline each (one column on a phone) or a month of day cells with a count of blocks. Today, Tomorrow and Next week move the drawn date. The current view is marked "Current" in its row, and each change is said on the status line and, inside the dialog, by the menu's own live region.
What stays local, and how do I wire it?
All of it. The eight starting blocks are typed constants, the parser is a few regular expressions in the file, and adding a block only changes state. In your app keep parseQuick or swap it for your own, set TODAY from the user's clock and time zone when the menu opens, and send the event to your calendar API in pick.
Is it accessible from the keyboard?
Yes. Type a sentence, the arrow keys move through the rows and the pane follows, and Enter adds the event or goes to the view or day. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.