shadcn.io is not affiliated with official shadcn/ui
Calendar View Task List Block for React Aria
A week strip of seven days with open counts over the chosen day's task list, an Overdue band with Move all to today, a Move to select on every task and a one-line Undo.
Installation
Overview
Plan the week a day at a time, with this calendar view to-do list for React with React Aria. A Toggle Group of seven days, Monday 12 to Sunday 18 October, sits at the top of the frame; each day shows its weekday (today says "Today"), its date and how many tasks are still open, and choosing one lists that day's tasks below. A pinned Overdue band collects every open task whose day has passed, with an outline "Move all to today" button. Each task is a Checkbox named by its title with a Native Select called Move to, offering Today, Tomorrow, the rest of the week and next Monday: choosing one changes the due date, so the day counts and both lists follow, and a one-line Undo in the foot takes the move back. A day with nothing due shows an Empty state in the same height. It is a week and one day's list, not a month grid. Bands are ruled by Guides, and the only motion is a CSS entrance. For planners, personal task apps and anything that works day by day.
FAQ
How do I load my own tasks and week?
Replace START with your tasks (an id, title, due ISO date, priority word and done flag) and WEEK with the seven days you want to show. The strip counts, the Overdue band and the day list are worked out from those and the fixed AS_OF day, so a task due before AS_OF that is still open lands in Overdue by itself.
What stays local, and how do I save for real?
Everything. Ticking and moving change state on the page and nothing is sent, so the plan resets on reload. In your app write the new due date from move, moveLate and undo, and the done flag from toggle.
How do I move a task to a day outside the list?
The select offers today through next Monday, which covers most rescheduling. To offer any date, add targets to TARGETS or swap the select for your own date picker and call move(id, iso) with the chosen ISO date.
What counts as overdue?
An open task whose due date is before AS_OF. It is listed only in the Overdue band, not on its own day, so a past day shows just what was finished on it and the strip counts only what can still be acted on.