AFAqua Fusion

Calendar

A styled date picker calendar built on top of react-calendar. Supports date selection, custom tile rendering, and locale formatting.

Import

import { Calendar } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook (opens in a new tab)
Loading preview...

Usage

const [date, setDate] = useState<Date | null>(new Date());
 
<Calendar value={date} onChange={(value) => setDate(value as Date)} />

With custom tile content

<Calendar
  value={selectedDate}
  onChange={handleChange}
  tileContent={({ date }) => {
    const hasEvent = events.includes(date.toDateString());
    return hasEvent ? <div className="h-1 w-1 rounded-full bg-primary-500" /> : null;
  }}
/>

Without double navigation

By default, double navigation arrows (year skip) are hidden. Set showDoubleNavigation to enable them.

<Calendar value={date} onChange={handleChange} showDoubleNavigation />

Props

PropTypeDefaultDescription
valueDate | null-Currently selected date.
onChange(value: Value) => void-Callback fired when a date is selected.
onActiveStartDateChange(props: { activeStartDate: Date | null }) => void-Callback fired when the visible month or year changes.
tileContent(props: { date: Date; view: string }) => React.ReactNode-Custom content to render inside each calendar tile.
tileClassName(props: { date: Date }) => string-Custom class names for individual tiles.
minDetail'month' | 'year' | 'decade' | 'century''month'Minimum detail level the calendar can show.
showDoubleNavigationbooleanfalseShow double navigation arrows for year-level navigation.
localestring'en-US'Locale string for date formatting.
classNamestring-Additional CSS classes for the calendar wrapper.