Calendar
React DayPicker with Flux tokens: single, range, dropdown captions, week numbers, presets, RTL, and timezone support.
Preview
Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.
Live preview
Single (default caption)
Month & year dropdowns
Range · two months
Full width (fullWidth)
Week numbers
Modifiers · booked dates
Presets
Date + time
Custom cells · larger grid
RTL · Arabic locale
Timezone-aware selection
Uses timeZone from Intl after mount to avoid hydration drift.
Installation
Add the package to your app (full Next.js + Tailwind steps on Installation):
npm install @payglocal_ui/flux-uiUsage
Import
import { Calendar, type DateRange } from "@payglocal_ui/flux-ui";Example
const [date, setDate] = useState<Date | undefined>();
<Calendar
mode="single"
selected={date}
onSelect={setDate}
captionLayout="dropdown"
className="rounded-xl border border-border"
/>