Pro Components
Base Components
Availability Calendar
Month-grid calendar that surfaces per-day availability with status dots, weekend weighting, and a selected-day summary.
Example
June 2025
SunMonTueWedThuFriSat
Available
Partial
Full
Introduction
Availability Calendar includes:- Header: Centered month/year label flanked by previous and next month controls.
- Month grid: Auto-sized 5 or 6 row grid with leading/trailing days from adjacent months muted.
- Status dots: Per-day marker for
available,partial, orfullcapacity. - Selection state: Active day shows a brand ring; today carries a lighter ring when not selected.
- Legend + summary: Footer legend for the three statuses plus a short summary of the selected day.
Usage
import { AvailabilityCalendarPanel } from "@/components/ui/calendar-availability";
<AvailabilityCalendarPanel />;getAvailabilityStatus with a real lookup against your bookings/inventory store, and adjust the availabilityStatusMeta map to rename the statuses or restyle the swatches and dots.