Calendar

Use Calendar

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

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Calendar label="Choose a date" defaultValue="2026-10-26" today="2026-10-26" weekStartsOn={1} />
    </FloodRoot>
  );
}

Design notes

• Calendar is a standalone visual collection. DateField handles text entry and DatePicker composes the field and calendar layer.
• Values use canonical YYYY-MM-DD and visibleMonth uses YYYY-MM. Locale formats Gregorian month/day names; weekStartsOn is explicit.
• Arrows move dates; Home/End move within a week and PageUp/PageDown navigate months. Controlled month refusal preserves a real focused day. Disabled dates remain discoverable but cannot select.
• The host owns selected values, availability and side effects. Provide today for a deterministic clock in tests or rendering. Min/max bound navigation; readonly prevents selection while allowing browsing. Introduced in 0.2.7.
• Month and year controls replace the content of this calendar. Selecting a navigation period returns to days without changing the selected date.
• granularity="day" | "month" | "year" chooses YYYY-MM-DD, YYYY-MM or YYYY.

API reference