shadcn.io is not affiliated with official shadcn/ui
Content Calendar Dashboard Block for Ark UI
October as a month grid of Blog, Social, Email and Video pieces with a type filter, a piece card with a Move to select, and a three-pieces-a-day limit that refuses a move to a full day.
Installation
Overview
Plan a month of content and move pieces between days with this calendar for React with Ark UI. A hairline frame with a plus mark on each corner holds October 2026 as a grid of weeks, with 22 Kalends pieces on it. Each piece is a chip with a glyph for its type (Blog, Social, Email or Video) and a dashed outline while it is still a draft. A ToggleGroup in the header picks a type and dims the others. Pressing a chip opens its card in the side cell with the owner, status, date, how many pieces of each type fall in the same week, and a Select called Move to. A day holds three pieces at most, so moving to a full day is refused in a polite line that names the day. It's built from ToggleGroup, Select, Badge, Avatar and Guides. For editorial planners and campaign calendars.
FAQ
How do I fill it with my own pieces?
Edit PIECES: an id, a title, a type (one of the ids in KINDS), a status, an owner and the day of the month. The grid, the day counts, the legend counts and the week counts are all worked out from that list. TODAY is the day that gets the filled number, and FIRST_COLUMN is the weekday column of the 1st (Monday is 0); change both, DAYS_IN_MONTH and the day list in DAY_ITEMS for another month.
How does the three-pieces-a-day limit work?
CAPACITY is the limit. Picking a day in Move to that already holds that many pieces changes nothing and says so in the status line, for example "Thu, Oct 15 is full (3 of 3). Pick another day." Picking the day the piece is already on says that too. Any other day moves the piece, and the counts on both days update.
What does the type toggle do?
It dims every chip that isn't of that type, in a quiet fill with readable text, and the status line says how many pieces match. Nothing is hidden, so the grid never changes size, and All shows everything again.
How do I use it from the keyboard?
Tab goes from chip to chip, in reading order, and Enter or Space opens the piece. The Move to select opens with Enter or the arrow keys, and each chip is named with its title, type, status and date. The status line is a polite live region, so a move or a refusal is read out.
What stays local, and how do I wire it for real?
Everything: moves live in the page's state and are lost on reload, and nothing is published, scheduled or sent. Replace the setPieces call in moveTo with a request to your content service, keep the refusal check on the server too, and take "today" from your own clock instead of the typed 14th.