Main Component Configuration

/**
 * Renders the DayPicker calendar component
 * @param props - Configuration props for the DayPicker component
 * @returns Rendered DayPicker React element
 */
function DayPicker(props: DayPickerProps): React.ReactElement;

type DayPickerProps = PropsBase & (
  | PropsSingle
  | PropsSingleRequired  
  | PropsMulti
  | PropsMultiRequired
  | PropsRange
  | PropsRangeRequired
  | { mode?: undefined; required?: undefined }
);

import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

// Basic calendar without selection
function BasicCalendar() {
  return <DayPicker />;
}

// Calendar with custom initial month
function CustomInitialMonth() {
  return (
    <DayPicker
      defaultMonth={new Date(2024, 5)}
      fromDate={new Date(2024, 0)}
      toDate={new Date(2024, 11)}
    />
  );
}

// Calendar with disabled dates
function CalendarWithDisabledDates() {
  const disabledDays = [
    new Date(2024, 5, 10),
    new Date(2024, 5, 20),
    { before: new Date(2024, 5, 1) },
    { dayOfWeek: [0, 6] } // weekends
  ];

  return (
    <DayPicker
      disabled={disabledDays}
      modifiersClassNames={{
        disabled: "my-disabled-day"
      }}
    />
  );
}

/**
 * Base props for customizing the calendar, handling localization, and managing events
 */
interface PropsBase {
  /** Class name to add to the root element */
  className?: string;
  /** Change the class names used by DayPicker */
  classNames?: Partial<ClassNames>;
  /** Change the class name for days matching the modifiers */
  modifiersClassNames?: ModifiersClassNames;
  /** Style to apply to the root element */
  style?: React.CSSProperties;
  /** Change the inline styles of the HTML elements */
  styles?: Partial<Styles>;
  /** Change the style for days matching the modifiers */
  modifiersStyles?: ModifiersStyles;
  /** A unique id to add to the root element */
  id?: string;
  
  /** The initial month to show in the calendar */
  defaultMonth?: Date;
  /** The month displayed in the calendar (controlled) */
  month?: Date;
  /** Event handler when the month changes */
  onMonthChange?: (month: Date) => void;
  
  /** The number of months to display */
  numberOfMonths?: number;
  /** Enable paged navigation */
  pagedNavigation?: boolean;
  /** Reverse the years in the dropdown */
  reverseYears?: boolean;
  
  /** The earliest month to start the month navigation */
  startMonth?: Date;
  /** The latest month to end the month navigation */
  endMonth?: Date;
  /** The earliest day to start the day navigation */
  fromDate?: Date;
  /** The latest day to end the day navigation */
  toDate?: Date;
  
  /** Hide the navigation bar */
  hideNavigation?: boolean;
  /** Disable the navigation */
  disableNavigation?: boolean;
  /** The layout of the navigation */
  navLayout?: "before" | "after" | "around";
  /** The layout of the caption */
  captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
  
  /** Show the week numbers */
  showWeekNumber?: boolean;
  /** Hide the weekdays row */
  hideWeekdays?: boolean;
  /** Show the outside days */
  showOutsideDays?: boolean;
  /** Make outside days non-interactive */
  fixedWeeks?: boolean;
  
  /** Use ISO 8601 week dates */
  ISOWeek?: boolean;
  /** Use broadcast calendar */
  broadcastCalendar?: boolean;
  /** The day of week to start the week */
  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  /** The day of January which is always in the first week */
  firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
  
  /** Today's date (defaults to current date) */
  today?: Date;
  /** The locale object to localize the user interface */
  locale?: Locale;
  /** Time zone to display the dates */
  timeZone?: string;
  /** Custom date library */
  dateLib?: Partial<DateLib>;
  
  /** Apply modifiers to days matching the given matchers */
  modifiers?: Record<string, Matcher>;
  /** Hide days matching the given matchers */
  hidden?: Matcher | Matcher[];
  /** Disable days matching the given matchers */
  disabled?: Matcher | Matcher[];
  
  /** Custom components to replace the default ones */
  components?: CustomComponents;
  /** Custom formatters for date display */
  formatters?: Partial<Formatters>;
  /** Custom labels for accessibility */
  labels?: Partial<Labels>;
  
  /** Enable month change animation */
  animate?: boolean;
  /** Text direction */
  dir?: "ltr" | "rtl";
  /** Language tag */
  lang?: string;
  /** The role attribute */
  role?: string;
  /** The aria-label attribute */
  "aria-label"?: string;
  /** Content Security Policy nonce */
  nonce?: string;
  /** The title attribute */
  title?: string;
  
  /** Event handler for when a day button loses focus */
  onDayBlur?: DayEventHandler<React.FocusEvent>;
  /** Event handler for when a day is clicked */
  onDayClick?: DayEventHandler<React.MouseEvent>;
  /** Event handler for when a day button receives focus */
  onDayFocus?: DayEventHandler<React.FocusEvent>;
  /** Event handler for when a key is pressed on a day button */
  onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
  /** Event handler for when the mouse enters a day button */
  onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
  /** Event handler for when the mouse leaves a day button */
  onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
  /** Event handler for when the next month button is clicked */
  onNextClick?: MonthChangeEventHandler;
  /** Event handler for when the previous month button is clicked */
  onPrevClick?: MonthChangeEventHandler;
  
  /** Custom content to display in the footer */
  footer?: React.ReactNode;
  /** Custom numerals for date display */
  numerals?: Numerals;
  /** Use additional week year tokens */
  useAdditionalWeekYearTokens?: boolean;
  /** Use additional day of year tokens */
  useAdditionalDayOfYearTokens?: boolean;
}

/**
 * Generic day event handler for various mouse and keyboard events
 */
type DayEventHandler<EventType extends React.SyntheticEvent> = (
  date: Date,
  modifiers: Modifiers,
  e: EventType
) => void;

/**
 * Event handler for month navigation events
 */
type MonthChangeEventHandler = (month: Date) => void;

/**
 * Record of modifier flags applied to a day
 */
interface Modifiers {
  [modifier: string]: boolean;
}

/**
 * Union type for various date matching patterns
 */
type Matcher = 
  | boolean
  | ((date: Date) => boolean)
  | Date
  | Date[]
  | DateRange
  | DateInterval
  | DateBefore
  | DateAfter
  | DayOfWeek;

interface DateRange {
  from: Date | undefined;
  to: Date | undefined;
}

interface DateInterval {
  before: Date;
  after: Date;
}

interface DateBefore {
  before: Date;
}

interface DateAfter {
  after: Date;
}

interface DayOfWeek {
  dayOfWeek: number | number[];
}

// Disable specific dates
const disabledMatcher: Matcher[] = [
  new Date(2024, 5, 15), // specific date
  { before: new Date(2024, 5, 1) }, // dates before June 1st
  { after: new Date(2024, 5, 30) }, // dates after June 30th
  { dayOfWeek: [0, 6] }, // weekends
  (date: Date) => date.getDate() > 25 // custom function
];

<DayPicker disabled={disabledMatcher} />

// Custom modifiers
const customModifiers = {
  weekend: { dayOfWeek: [0, 6] },
  holiday: [
    new Date(2024, 6, 4), // July 4th
    new Date(2024, 11, 25) // Christmas
  ],
  available: (date: Date) => date.getDate() % 2 === 0
};

<DayPicker 
  modifiers={customModifiers}
  modifiersClassNames={{
    weekend: "weekend-day",
    holiday: "holiday-day",
    available: "available-day"
  }}
/>