shadcn.io is not affiliated with official shadcn/ui
Content Calendar Table Block for React
An editorial calendar sorted by date where weekdays with nothing scheduled appear as dashed gap rows with an Add idea button that inserts a draft, and a Show gaps switch.
Installation
Overview
See what is missing from a schedule as well as what is in it, with this content calendar table for React with Base UI. Seven pieces of an editorial calendar are sorted by date in one native table inside a frame of fixed height. The weekdays with nothing scheduled between the first piece and the last appear as quiet dashed rows ("Nothing on Wed 14 Oct") with an Add idea button that puts a Draft piece on that day, and the row becomes the piece. A Switch in the header, Show gaps, hides or shows those rows without changing the frame's height. Type is a word (Post, Video, Social), status is a word with a filled, half or hollow dot, and dates are fixed. A polite line says what changed and how many empty weekdays are left. On a phone the type, platform and author fold under the title. It's built from a native table, Switch, Button, Badge and Guides. For editorial plans, social calendars, release schedules and rotas.
FAQ
How are the gap rows found?
The helper walks every day from the first piece's date to the last, skips Saturdays and Sundays, and keeps the days no piece falls on. Gaps are never typed: add a piece on a gap and the row turns into the piece the next render, and the count in the polite line goes down.
What does Add idea do?
It adds a Draft piece called "Untitled idea" on that day, with its author left as Unassigned, to this page's state. Focus moves to the schedule so the keyboard is not lost when the button leaves with its row. In your app, open the editor for the new piece from that handler.
Why does hiding the gaps not shrink the panel?
The schedule is a frame of fixed height that scrolls, so the panel is the same height with the gaps shown or hidden. Only the rows inside it change.
What about phones and tablets?
Below the medium breakpoint the Type, Platform and Author columns are hidden and the type and platform go in a line under the title. A gap row spans the two columns that are left, and its button stays at the end.