カレンダーページ処理 - Hashimoto-Noriaki/react-calendar GitHub Wiki
説明
| ライブラリ | 説明 |
|---|---|
| startOfMonth / endOfMonth | 今月の範囲を決める |
| eachWeekOfInterval | その月に含まれる「各週の日曜日」を取得 |
| eachDayOfInterval | 各週に対して、日〜土の1週間を生成 |
| setDateList | それらをまとめて状態に保存（カレンダー描画用） |
useEffect(() => {
const monthOfSundayList = eachWeekOfInterval({
start: startOfMonth(today),
end: endOfMonth(today),
})
const newDateList: Date[][] = monthOfSundayList.map((date) => {
return eachDayOfInterval({
start: date,
end: endOfWeek(date),
})
})
setDateList(newDateList)
}, [])
monthOfSundayList
start: startOfMonth(today),
end: endOfMonth(today)
- today は現在の日付（例：2025年3月24日）
- startOfMonth(today) → 3月1日
- endOfMonth(today) → 3月31日
「今月のはじめ〜終わり」の範囲を作ってる
週ごとの日曜日取得
const monthOfSundayList = eachWeekOfInterval({
start: ...,
end: ...
})
- eachWeekOfInterval() は、指定した期間の中で「各週の開始日（デフォルトで日曜日）」を全部取り出す 例：2025年3月の場合、こんな配列になる
[
2025-03-02, // 日曜日（第1週）
2025-03-09, // 第2週
2025-03-16, ...
...
]
各週に対応する「1週間分の日付」を作る
const newDateList = monthOfSundayList.map((date) => {
return eachDayOfInterval({
start: date,
end: endOfWeek(date),
})
})
- map() で各週（日曜）を回す
- eachDayOfInterval({ start, end }) で、その週の7日分（日〜土）を作成
eachDayOfInterval({ start: 3/2, end: 3/8 }) → [3/2, 3/3, ..., 3/8]
結果的に
[
[3/2, 3/3, ..., 3/8],
[3/9, ..., 3/15],
...
]
これは「1週分の日付 × 全週分」＝ 2次元配列（Date[][]）になる
state にセット
setDateList(newDateList)
作った2次元配列を dateList に保存！
これによって、画面にカレンダー表示ができるようになる🎉