shadcn.io is not affiliated with official shadcn/ui
Review Cycle Calendar Block for Vue
A performance cycle as eight people by four phases with each deadline, where every step is Done, Open or Late, a select filters the late and not started, and one button drafts reminders with an Undo.
Installation
Overview
Chase a review cycle without a spreadsheet with this review cycle calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a native table of eight people by four phases (Self review, Peer feedback, Manager review and Calibration). Each column is headed by its deadline and how many people are done, and each cell is Done with the day, Open with its deadline, or Late, which is worked out as not done with a deadline before 14 October 2026, the block's fixed "now". A Native Select in the header shows Everyone, Late or Not started, and the people who do not match keep their space, so the table never changes height. The one Shine Button, "Draft reminders for 3 people", drafts a reminder for everyone with a late step, marks those cells and says "Drafted 3 reminders in this demo; nothing was sent.", and an outline Undo takes it back. Each person is an initials Avatar, and on a phone the four phases fold into the person's second line. The bands are ruled by Guides. For people teams, managers and any cycle with deadlines to chase.
FAQ
How do I fill it with my people?
Edit PEOPLE (a name, initials, role and the ISO day each of the four phases was finished, empty if not) and PHASES (a name and its deadline). Whether a cell is Done, Open or Late, the counts in the column heads and the number on the button are all worked out from those and AS_OF.
What counts as Late, and as Not started?
A step is Late when it is not done and its deadline is before the fixed now; a step that is not done and not yet due is Open. The Late filter shows anyone with a late step, and Not started shows anyone who has not finished any step. The reminder button counts the people with a late step whichever filter is on.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, so the table, the counts and the button look the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server.
How do I use it with the keyboard?
The table is plain and read by row and column heads, each cell saying its word, so there is no grid to learn. The filter is a native select with a visible label, the status line speaks every result, and the hidden rows under a filter are removed from the tab order and from screen readers.