A weekly schedule component for managing availability time slots. Supports creation by click or drag, resizing, and drag-and-drop across days. Includes touch support and disabled/unavailable regions.
09:00
3h
12:00
14:00
2h
16:00
10:00
1.5h
11:30
* Striped regions indicate disabled times (e.g. lunch breaks or unavailable blocks). Events cannot be created, moved, or resized into these areas.
"use client"import { useState } from "react"import { Availability, type TimeSpan } from "@/registry/abui/ui/availability"export default function AvailabilityDemo() { const [data, setData] = useState<TimeSpan[]>([ { nanoid: "1", week_day: 1, start_time: "09:00", end_time: "12:00", active: true }, { nanoid: "2", week_day: 3, start_time: "14:00", end_time: "16:00", active: true }, { nanoid: "3", week_day: 5, start_time: "10:00", end_time: "11:30", active: true } ]) return ( <div className="w-full p-4 bg-background border rounded-lg"> <Availability value={data} onValueChange={setData} startTime={6} endTime={22} /> </div> )}value - TimeSpan[] - Array of time slot objectsonValueChange - (value: TimeSpan[]) => void - Callback when slots changedisabled - TimeSpan[] - Array of disabled/blocked regionsdays - number[] - Array of day indices (0-6) to displaytimeIncrements - number - Grid interval in minutes (default: 30)startTime - number - Start hour (0-23)endTime - number - End hour (0-23)useAmPm - boolean - Use AM/PM format instead of 24hmergeAdjacent - boolean - Automatically merge adjacent blocks (default: true)