Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Cleaning Schedule Calendar Block for Vue

A house-share chore wheel for five housemates over four weeks that rebuilds when someone is marked away, shows who doubles up, and keeps this week's three-task checklists with a count of what is done.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Share the housework fairly, even when someone is away, with this cleaning schedule for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a table of five housemates down the side and four weeks across the top, starting Monday 12 October 2026. Each cell lists the person's chores for the week, each with a small shape and its name (Kitchen, Bathroom, Hall, Bins, Living room). Nobody typed the cells: every chore moves one person along each week, worked out by modular arithmetic. A Switch on each person marks them away, and the rota is rebuilt without them: their chores pass to the next housemate at home, who then doubles up, and a line above the table says who ("Doubles up: Odette"). Under the table, this week's chores each carry three tasks to tick, with a Progress bar and a count ("6 of 15 done"). The names stay in place while the weeks scroll on a phone, an Avatar holds each person's initials and the bands are ruled by Guides. It's built from Switch, Progress, Avatar and Guides, with a CSS entrance only. For flatmates, shared offices and any group that takes turns at the same jobs.

FAQ

How do I change the people and the chores?

Edit PEOPLE and CHORES. Each chore has an id from 0, a mark and its list of tasks; WEEKS lists the Mondays shown. The person for a chore in a week is (chore + week) modulo the number of people, and the whole table is worked out from that.

What happens when someone is marked away?

ownerOf starts at the person the wheel names and moves along the list until it finds someone who is home. So a chore never goes unowned unless everyone is away, in which case the cells say so. The person who inherits it is named in the "Doubles up" line.

Do ticks follow a chore when its owner changes?

Yes. Ticks belong to the task, not the person, so marking someone away changes who the checklist is listed under and keeps what is already done.

Why is the first week always 12 October?

Nothing in the block reads the clock. WEEKS is typed, so the page, the viewer and a screenshot are identical on any date.

What stays local, and how do I wire it up?

Everything. The switches and ticks only change state in the page and nothing is sent to anyone. To make it real, store who is away and which tasks are done in your own API and load them into away and done.

How does it look on a phone?

The table scrolls sideways inside its frame with the names and switches held at the start, and the checklists stack in one column.

All 100 calendar blocks