shadcn.io is not affiliated with official shadcn/ui
Content Schedule Calendar Block for Vue
A tray of undated drafts beside a Monday to Friday week with Blog, Newsletter and Video rows: choose a draft, then an empty day in its row to schedule it, with past days published and locked.
Installation
Overview
Plan a week of posts from a backlog with this content schedule for Vue with Ark UI. Four drafts wait in a tray at the start of a hairline frame, each naming its channel; the week of 12 to 16 October 2026 sits at the end as a table of three channel rows, Blog, Newsletter and Video, by five days. You schedule in two presses, which is also the way to do it without dragging: press a draft, then press an empty day in its channel's row, and the draft becomes Scheduled while the tray count drops. Press a scheduled piece to send it back. Pieces before Wednesday 14 October are Published, worked out from their date, and locked, and a day that has passed cannot take a new piece. A Toggle Group in the header dims pieces that are not Scheduled or Published, a polite status line says what each press did, and an Empty state fills the tray when every draft is placed, at the same height. The bands are ruled by Guides. On a phone the tray comes first and the week scrolls sideways inside a named region. It's built from Toggle Group, Empty and Guides plus a plain table. For editorial and marketing teams who plan by channel.
FAQ
How do I fill it with my own content?
Edit START. A piece has a channel (blog, newsletter or video), a title and a day; an empty day makes it a draft that waits in the tray. Add a channel to CHANNELS for another row and change WEEK for other days. Whether a piece is Published or Scheduled is worked out from its day against TODAY, so you never type a status.
Why two presses and not dragging?
Dragging is hard or impossible for people using a keyboard, a switch or a screen reader, so the press-then-place route is the whole feature, not a fallback. It also works the same with a mouse, a finger or a keyboard. If you want pointer dragging as well, add it on top and keep these buttons.
What stops a draft going in the wrong place?
A draft keeps its channel, so pressing a cell in another row tells you which row to use, and a day that has passed refuses with its name. Published pieces are locked. Every refusal is written in the status line rather than silently ignored.
Why is Wednesday 14 October always today?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and the ring on the day number and the Published rule both come from it, so the block looks the same on any day. To follow the real date, set AS_OF from your own clock or server.
How is the week read by a screen reader?
It is a real table with a caption, column headers for the days and a row header for each channel. Each cell is a button named with its piece, channel, day and status, or "empty" for a free day, and published pieces say they are locked. The tray is a list of buttons that report whether they are pressed.