shadcn.io is not affiliated with official shadcn/ui
Schedule Manager CRUD Block for Svelte
A bakery's weekly rota as a window: eight people by seven days, an empty cell that opens a popover to add a shift, a refusal that names a rest or length clash, weekly hours per person, and Publish rota that locks every cell.
Installation
Overview
Plan a week of shifts without a spreadsheet, with this schedule manager for Svelte with Ark UI. A window of fixed height, framed by plus marks on each corner, holds a top bar with the week and a Draft badge, and the one Shine Button, Publish rota. Under it a strip counts shifts, hours and the people over 40 hours, derived from the grid. The grid is a table with the people held at the start and the days across: an empty cell says Add shift and a shift shows its hours, and pressing either opens a Popover with a start and an end in Native Select fields. Save refuses a shift that ends before it starts, runs over 10 hours or leaves under 10 hours of rest before or after the next day's shift, and the popover names the clash and stays open. Remove deletes a shift, every change is listed under Recent changes and the foot offers an Undo. Publish rota locks the cells, and pressing one says "Published: unpublish to edit". The arrow keys move between cells, and only the grid scrolls, so the window never changes height. For rotas, shift planners and any weekly grid people fill cell by cell.
FAQ
How do I fill it with my team and shifts?
Edit STAFF for the people and START_LINES for the shifts, one row|day|start|end line each, with the row an index into STAFF, the day 0 to 6 and times on the half hour. The week's labels are in DAYS, and the limits, 10 hours a shift, 10 hours of rest and 40 hours a week, are SHIFT_LIMIT, REST_LIMIT and WEEK_LIMIT in minutes. The hours, the counts and the over-40 warning are worked out from the shifts, never typed.
What does Save refuse, and why?
Three things, each in words in the popover and the foot: a shift that ends at or before its start, a shift longer than 10 hours, and a start or an end that leaves under 10 hours of rest next to the same person's shift on the day before or after, such as "Only 7 h after Tue 13:00". Nothing is saved until the shift passes, and the person's other shifts are never touched.
What does Publish rota do?
It flips the rota to Published, locks every cell and changes the button to Unpublish. A locked cell stays in the tab order and answers when pressed, so a keyboard user hears why nothing opened. Nobody is told in this demo; in your app call your API from flip and notify the team from there.
What can Undo bring back?
The last change, whether it was an added, changed or removed shift. The Recent changes list goes back to what it said before, and focus returns to that cell. Publishing is not part of Undo, because Unpublish is its own control.
What stays local, and how do I wire a real save?
Shifts live in state in this tab and a reload brings back the originals; nothing is sent and nothing reads the clock. In your app write to your API from onSave, onRemove and flip, keep the checks in problemOf on the server as well, and keep Undo as a restore call.
How does it look on a phone?
The window keeps its height. The top bar keeps the week and Publish rota, and the grid scrolls sideways inside its frame with the names held at the start, so a cell is always read against a person. The popover is as wide as the screen allows and its two selects sit side by side.