Calendar

<Calendar mode="single" selected={date} onSelect={setDate} />

言語は渡してください

月名・曜日名・週の開始は言語で変わります。既定を持っていません—— 書体名と同じで、ブランドの選択だからです。

import { ja } from 'react-day-picker/locale';

<Calendar locale={ja} />

渡さなければ英語になります。

react-day-picker の CSS は読み込みません

このコンポーネントは react-day-picker に乗っていますが、そちらの CSS は読み込みません。 持っている値がこのスケールの外にあるためです。

あなたも読み込まないでください。 読み込むとサイズと色が二重になります。

import 'react-day-picker/style.css';  {/* 要りません */}

選び方は mode で決まります

selected と onSelect の型は mode に連動します。 範囲のつもりで1日を渡すと型で落ちます。

<Calendar mode="range" selected={range} onSelect={setRange} />

範囲は端と中で濃さが違います

端は濃く、あいだは淡く塗ります。同じ濃さにすると、端がどこか読めません。

端は外側だけ丸めるので、中と繋がって1本に見えます。

選べない日は暗くなります

disabled に渡した日は押せなくなります。

<Calendar mode="single" disabled={{ dayOfWeek: [0, 6] }} />

押せるように見えて何も起きないものを作りません。

依存が3つインストールされます

Calendar を追加すると、react-day-picker と date-fns と @date-fns/tz も 一緒にインストールされます。Calendar を使うときだけです。

単一の日付だけなら自分で書ける規模ですが、範囲まで持つと 日付のマス目の中でのフォーカス移動・選択の申告・月を移ったときの読み上げが 一気に増えます。 そこを引き受けてもらうための依存です。