# Weekly Hours

> 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.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/weekly-hours
- Install: `npx shadcn@latest add @geturui-pro/weekly-hours`
- Dependencies: motion, lucide-react

## Usage

```tsx
"use client";
import * as React from "react";
import { WeeklyHours, createAvailability, type Availability } from "@/components/blocks/weekly-hours";

export function BookingHours() {
  const [value, setValue] = React.useState<Availability>(() => createAvailability(7, 20, (day, slot) => day < 5 && slot >= 2 && slot < 16));
  return (
    <WeeklyHours
      value={value}
      onValueChange={setValue}
      startHour={8}
      endHour={18}
      slotMinutes={30}
      timezone="America/New_York (GMT-4)"
    />
  );
}
```

## 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.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.