User Schedule React component
A weekly availability editor: a switch per day, any number of time ranges with overlap and order checks, copy one day's hours to other days, a time zone, days off by date, a live week preview with total hours, and a save bar that blocks saving until every range is valid.
About the User Schedule component
User Schedule is where someone sets when they can be booked: which days they work, the hours on each day, their time zone and the dates they're off.
It's built to be quick to fill in. Add as many ranges as a day needs, copy a day to the rest of the week in two clicks, and watch the week preview update. Ranges that overlap or end before they start are flagged right away, and saving waits until everything is valid.
When to use it
Use it for booking and scheduling apps, team availability, support shift planning, tutor or consultant profiles, and any calendar that needs working hours.
Store the result per person and use it to offer only free slots in a booking form.
Installation
Add the User Schedule component to your project with the shadcn CLI. It lands in components/user-schedule.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/user-scheduleOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<UserSchedule /> accepts 6 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| name | string | "Lena Brandt" |
| defaultValue | object | DEFAULT |
| defaultValue.timezone* | string | — |
| defaultValue.days* | { on: boolean; ranges: Range[] }[] | — |
| defaultValue.overrides* | string[] | — |
| today | string | "2026-11-12" |
| onSave | (value: UserScheduleValue) => Promise<void> | void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- namestringDefault: "Lena Brandt"
- defaultValueobjectDefault: DEFAULT
- defaultValue.timezone*string
- defaultValue.days*{ on: boolean; ranges: Range[] }[]
- defaultValue.overrides*string[]
- todaystringDefault: "2026-11-12"
- onSave(value: UserScheduleValue) => Promise<void> | void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
User Schedule FAQ
- Can a day have more than one range?
- Yes. Use + to add a range after the last one, for example a morning block and an afternoon block with lunch in between. Remove one with ×.
- What counts as an invalid range?
- A range that ends at or before its start, or one that overlaps another range on the same day. Both are outlined in red with a message, and Save stays disabled until they're fixed.
- How does copying work?
- The copy button on a day opens a list of the other days. Tick the ones you want, or press Weekdays, then Apply. The chosen days get the same on/off state and ranges.
- Are days off repeated every year?
- No, each one is a single date. Add a date range by adding each day, or extend the overrides to store ranges if you need longer leave.
- Is it accessible?
- Each day has a labelled switch, every time select has a label naming the day and range, invalid ranges use aria-invalid with a linked message, the copy panel is a labelled dialog, and the save bar is a status region.
