Paint your working hours on a week grid: click or drag to fill slots that merge into runs, switch whole days off, and see the summary chips and weekly total update.
scheduleravailabilitycalendarbookingtime slotspaintgrid
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/weekly-hours
Also installs: Button, Odometer Number, Switch
Usage
usage.tsx
1"use client";
2import * as React from "react";
3import { WeeklyHours, createAvailability, type Availability } from "@/components/blocks/weekly-hours";
4
5export function BookingHours() {
6 const [value, setValue] = React.useState<Availability>(() => createAvailability(7, 20, (day, slot) => day < 5 && slot >= 2 && slot < 16));
7 return (
8 <WeeklyHours
9 value={value}
10 onValueChange={setValue}
11 startHour={8}
12 endHour={18}
13 slotMinutes={30}
14 timezone="America/New_York (GMT-4)"
15 />
16 );
17}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | { enabled: boolean[]; slots: boolean[][] } | — | Controlled availability: one flag per day and slots[day][slot]. |
defaultValue | Availability | — | Initial value when uncontrolled; defaults to weekdays 9–12 and 13–17. |
onValueChange | (value: Availability) => void | — | Called on every paint, toggle, reset or clear. |
days | string[] | ["Mon", … "Sun"] | Column labels. |
startHour / endHour | number | 8 / 18 | Visible hour range. |
slotMinutes | number | 60 | Slot length; 30 and 60 work best. |
timezone | string | "UTC" | Label beside the globe icon. |
title / description | string | — | Card heading copy. |
Accessibility
- Slots are toggle buttons with aria-pressed and full labels ("Monday 09:00 to 10:00") in a roving tab order: arrow keys move, Home/End jump, Space or Enter toggles.
- Day switches are labelled ("Monday available"); switched-off days mark their slots aria-disabled.
- The weekly total is announced politely as it changes; the slot pop becomes a fade under reduced motion.