RangeCalendar

Use RangeCalendar

RangeCalendar is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, RangeCalendar } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <RangeCalendar label="Choose travel dates" today="2026-10-26" defaultValue={{start:"2026-10-12",end:"2026-10-18"}} />
    </FloodRoot>
  );
}

Design notes

• The first activation chooses a start; the second completes a normalized ordered interval. Hover and focus can preview an unfinished interval without committing.
• Controlled values include partial {start,end:""}; the host must accept that partial value to advance selection. onRangeSelect confirms an enabled completed interval.
• isDateDisabled controls endpoints. isRangeDisabled validates the entire interval; interior blocked dates are not inferred by scanning arbitrary date spans.
• Reuses the Calendar grid, month navigation, focus and localization contracts. Translate rangeLabels for instruction messages. Introduced in 0.2.7.

API reference