shadcn.io is not affiliated with official shadcn/ui
Editorial Calendar Block for React Aria
A table of eight magazine articles moving through Draft, Review, Edit and Published with Advance and Back buttons, due dates in words, per-stage counts and an author filter.
Installation
Overview
Show where every article stands with this editorial calendar for React with React Aria. A band across the top counts the pieces at Draft, Review, Edit and Published, and under it a table lists eight articles with their topic and author on a second line, the stage drawn as a circle that fills as the piece goes on and always written as a word, and the due date in words worked out from Wednesday 14 October 2026: "Due in 3 days", "Due today", "Overdue 2 days". An Advance and a Back Button on each row move the piece one stage, and each is named for the piece and the stage it goes to, such as Advance "Rhubarb two ways" to Edit. A Toggle Group of initials Avatars filters by author, and the band follows it. The table keeps its height when the filter narrows it, and the frame is ruled by Guides. On a phone the due date and the stage word fold into the title's second line and only the glyph and the two buttons stay in their columns. For magazines, newsletters and any team that tracks a piece through review.
FAQ
How do I change the stages or the articles?
Edit STAGE_WORDS for the stage names and START for the articles. An article has an author id from AUTHORS, a due ISO date, a stage number from 0 (the first word) up, a title and a topic. The counts, the due words and the buttons' names are all worked out from those.
How is the due date worked out?
dueWord compares the piece's due date with TODAY, the day of AS_OF, in whole days, and writes it as today, tomorrow, in N days or overdue by N days. A published piece shows "Published" and no due word. Nothing reads the clock, so it is the same on any day; use your own date in AS_OF to follow the real one.
Why is the stage a glyph and a word?
A stage shown only by a color or a fill can't be read by everyone, so the circle is an extra and the word is always there: beside the glyph on wider screens, and read aloud and written in the second line on a phone.
What happens at the first and last stage?
The button that can't go further stays in the page and is marked as disabled to assistive technology, so keyboard focus is not lost when a piece reaches Published. Pressing it says why in the status line instead of doing nothing.