@neynar/ui

# Calendar **Type**: component Calendar - A comprehensive date selection calendar component A fully-featured calendar component built on react-day-picker that provides intuitive date selection with extensive customization options. Supports single dates, date ranges, multiple dates, and custom validation rules with built-in accessibility features. Built on the powerful react-day-picker library, this component provides a complete calendar interface with advanced features like custom formatters, modifiers, disabled dates, localization, and extensive styling options. ## JSX Usage ```jsx import { Calendar } from '@neynar/ui'; <Calendar mode={value} selected={[]} onSelect={handleSelect} buttonVariant={value} captionLayout={value} showOutsideDays={true} numberOfMonths={0} showWeekNumber={true} ISOWeek={true} fixedWeeks={true} disabled={[]} highlighted={[]} defaultMonth={value} month={value} onMonthChange={handleMonthChange} startMonth={value} endMonth={value} fromYear={0} toYear={0} disableNavigation={true} hideNavigation={true} animate={true} weekStartsOn={value} firstWeekContainsDate={value} locale={value} dir={value} onDayClick={handleDayClick} onDayMouseEnter={handleDayMouseEnter} onDayMouseLeave={handleDayMouseLeave} onDayKeyDown={handleDayKeyDown} onWeekNumberClick={handleWeekNumberClick} formatters={() => {}} classNames={value} components={value} footer={value} modifiers={[]} className="value" style={value} /> ``` ## Component Props ### mode - **Type**: `"single" | "multiple" | "range" | "none"` - **Required**: No - **Description**: No description available ### selected - **Type**: `Date | Date[] | DateRange | undefined` - **Required**: No - **Description**: No description available ### onSelect - **Type**: `(value: Date | Date[] | DateRange | undefined) => void` - **Required**: No - **Description**: No description available ### buttonVariant - **Type**: `| "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"` - **Required**: No - **Description**: No description available ### captionLayout - **Type**: `"buttons" | "dropdown" | "dropdown-buttons"` - **Required**: No - **Description**: No description available ### showOutsideDays - **Type**: `boolean` - **Required**: No - **Description**: No description available ### numberOfMonths - **Type**: `number` - **Required**: No - **Description**: No description available ### showWeekNumber - **Type**: `boolean` - **Required**: No - **Description**: No description available ### ISOWeek - **Type**: `boolean` - **Required**: No - **Description**: No description available ### fixedWeeks - **Type**: `boolean` - **Required**: No - **Description**: No description available ### disabled - **Type**: `Matcher | Matcher[]` - **Required**: No - **Description**: No description available ### highlighted - **Type**: `Matcher | Matcher[]` - **Required**: No - **Description**: No description available ### defaultMonth - **Type**: `Date` - **Required**: No - **Description**: No description available ### month - **Type**: `Date` - **Required**: No - **Description**: No description available ### onMonthChange - **Type**: `(month: Date) => void` - **Required**: No - **Description**: No description available ### startMonth - **Type**: `Date` - **Required**: No - **Description**: No description available ### endMonth - **Type**: `Date` - **Required**: No - **Description**: No description available ### fromYear - **Type**: `number` - **Required**: No - **Description**: No description available ### toYear - **Type**: `number` - **Required**: No - **Description**: No description available ### disableNavigation - **Type**: `boolean` - **Required**: No - **Description**: No description available ### hideNavigation - **Type**: `boolean` - **Required**: No - **Description**: No description available ### animate - **Type**: `boolean` - **Required**: No - **Description**: No description available ### weekStartsOn - **Type**: `0 | 1 | 2 | 3 | 4 | 5 | 6` - **Required**: No - **Description**: No description available ### firstWeekContainsDate - **Type**: `1 | 4` - **Required**: No - **Description**: No description available ### locale - **Type**: `Locale` - **Required**: No - **Description**: No description available ### dir - **Type**: `"ltr" | "rtl"` - **Required**: No - **Description**: No description available ### onDayClick - **Type**: `(day: Date, modifiers: Record<string, boolean>) => void` - **Required**: No - **Description**: No description available ### onDayMouseEnter - **Type**: `(day: Date, modifiers: Record<string, boolean>) => void` - **Required**: No - **Description**: No description available ### onDayMouseLeave - **Type**: `(day: Date, modifiers: Record<string, boolean>) => void` - **Required**: No - **Description**: No description available ### onDayKeyDown - **Type**: `( day: Date, key: string, modifiers: Record<string, boolean>, ) => void` - **Required**: No - **Description**: No description available ### onWeekNumberClick - **Type**: `(weekNumber: number, dates: Date[]) => void` - **Required**: No - **Description**: No description available ### formatters - **Type**: `{ /** Format individual day numbers */ formatDay?: (date: Date) => string; /** Format month caption (header) */ formatMonthCaption?: (date: Date) => string; /** Format week numbers */ formatWeekNumber?: (weekNumber: number) => string; /** Format weekday names in header */ formatWeekdayName?: (date: Date) => string; /** Format year in dropdown */ formatYearDropdown?: (date: Date) => string; /** Format month in dropdown */ formatMonthDropdown?: (date: Date) => string; }` - **Required**: No - **Description**: No description available ### classNames - **Type**: `{ /** Root calendar container */ root?: string; /** Months container */ months?: string; /** Individual month container */ month?: string; /** Month caption/header */ month_caption?: string; /** Navigation container */ nav?: string; /** Previous month button */ button_previous?: string; /** Next month button */ button_next?: string; /** Month/year dropdowns container */ dropdowns?: string; /** Individual dropdown */ dropdown?: string; /** Weekdays header row */ weekdays?: string; /** Individual weekday header */ weekday?: string; /** Week row container */ week?: string; /** Week number cell */ week_number?: string; /** Individual day cell */ day?: string; /** Selected day(s) */ selected?: string; /** Today's date */ today?: string; /** Disabled days */ disabled?: string; /** Days outside current month */ outside?: string; /** Range start day */ range_start?: string; /** Range end day */ range_end?: string; /** Days in middle of range */ range_middle?: string; /** Hidden days */ hidden?: string; }` - **Required**: No - **Description**: No description available ### components - **Type**: `{ /** Root calendar container component */ Root?: React.ComponentType< React.ComponentProps<"div"> & { rootRef?: React.Ref<HTMLDivElement> } >; /** Month caption component */ MonthCaption?: React.ComponentType<{ displayMonth: Date }>; /** Navigation chevron icons */ Chevron?: React.ComponentType< React.ComponentProps<"svg"> & { orientation?: "left" | "right" | "up" | "down"; } >; /** Individual day button */ DayButton?: React.ComponentType<React.ComponentProps<typeof DayButton>>; /** Day content (number/text inside day) */ DayContent?: React.ComponentType<{ date: Date }>; /** Dropdown select components */ Dropdown?: React.ComponentType<React.ComponentProps<"select">>; /** Week number component */ WeekNumber?: React.ComponentType< React.ComponentProps<"td"> & { children: React.ReactNode } >; /** Footer component */ Footer?: React.ComponentType<{ children: React.ReactNode }>; /** Weekdays header */ Weekdays?: React.ComponentType<React.ComponentProps<"tr">>; /** Week row component */ Week?: React.ComponentType<React.ComponentProps<"tr">>; }` - **Required**: No - **Description**: No description available ### footer - **Type**: `React.ReactNode` - **Required**: No - **Description**: No description available ### modifiers - **Type**: `Record<string, Matcher | Matcher[]>` - **Required**: No - **Description**: No description available ### className - **Type**: `string` - **Required**: No - **Description**: No description available ### style - **Type**: `React.CSSProperties` - **Required**: No - **Description**: No description available