shadcn.io is not affiliated with official shadcn/ui
Volunteer Shifts Calendar Block for Vue
A food-bank Saturday of seven shifts grouped by place, each with a bar and a count of people signed up, a Sign up that refuses overlapping shifts, your hours added up and a place filter.
Installation
Overview
Fill a day's shifts without double-booking anyone with this volunteer rota for Vue with Ark UI. A hairline frame with a plus mark on each corner holds Saturday 17 October 2026 at a food bank, with seven shifts in three places: Warehouse, Kitchen and Van routes. Each shift shows its hours and a Progress bar with the people signed up against the people needed ("Packing: 3 of 5"). Sign up adds you to a shift and Leave takes you off it in one press; a shift you already hold that overlaps the one you press is named in words ("You're already on Sorting 10:00 to 13:00"), and a full shift says it is full. Your hours are added up from the shifts you hold, and a Toggle Group narrows the list to one place without changing the height of the panel. The bands are ruled by Guides, you are marked with a Badge and a polite status line says each result. It's built from Progress, Toggle Group, Button, Badge and Guides, with a CSS entrance only. For volunteer coordinators, community groups and any rota where people pick their own shifts.
FAQ
How do I add my own shifts?
Edit SHIFTS and PLACES. Each shift has an id, a name, a place, 24-hour start and end times, the number of people needed and how many have already signed up (filled, not counting you). The bars, the counts, the hours and the overlap check are all worked out from that array.
How are overlapping shifts refused?
Two shifts overlap when each starts before the other ends, so a shift that starts exactly when another ends is allowed. clashOf looks through the shifts you hold, and the first one that overlaps the shift you pressed is named in the status line instead of signing you up.
Does filtering change the height of the panel?
No. The list shows the chosen place over an unseen copy of every place's rows, so the panel and the foot stay where they are whichever place you pick.
Why is the day fixed?
Nothing in the block reads the clock. The day 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. Signing up only changes state in the page, and nobody is told. To make it real, load the shifts and the counts from your own API, post the sign-up when Sign up is pressed and reload the counts, keeping the overlap check on the client for a quicker answer.