📅

FullCalendarとReactで表示する月が変わったときにcallback関数発火させる

2022/08/21に公開約2,000字

prev(前の月), next(翌月)に切り替えた時になんらかの関数を発火させたい
classコンポーネントにおける書き方はちょこちょこ見つかったけど関数コンポーネントにおける書き方が見つからなかったので鼻の穴膨らませて必死に型を読んだ
のちの人が鼻の穴膨らまなくて済むようメモしとく

const handleDatesChange = (arg: DatesSetArg) => {
  console.log(arg);
};

return (
  <FullCalendar
    plugins={[dayGridPlugin]}
    initialView="dayGridMonth"
    locale={jaLocale}
+   datesSet={handleDatesChange}
  />
);      

ちなみに引数ではこういうオブジェクトを恵んでもらえる、ありがたや

{
    "start": "2022-07-30T15:00:00.000Z",
    "end": "2022-09-10T15:00:00.000Z",
    "startStr": "2022-07-31T00:00:00+09:00",
    "endStr": "2022-09-11T00:00:00+09:00",
    "timeZone": "local",
    "view": {
        "type": "dayGridMonth",
        "dateEnv": {
            "timeZone": "local",
            "canComputeOffset": true,
            "calendarSystem": {},
            "locale": {
                "codeArg": "ja",
                "codes": [
                    "ja"
                ],
                "week": {
                    "dow": 0,
                    "doy": 4
                },
                "simpleNumberFormat": {},
                "options": {
                    "buttonText": {
                        "prev": "前",
                        "next": "次",
                        "today": "今日",
                        "month": "月",
                        "week": "週",
                        "day": "日",
                        "list": "予定リスト"
                    },
                    "weekText": "週",
                    "allDayText": "終日",
                    "noEventsText": "表示する予定はありません",
                    "direction": "ltr",
                    "weekTextLong": "Week",
                    "closeHint": "Close",
                    "timeHint": "Time",
                    "eventHint": "Event"
                }
            },
            "weekDow": 0,
            "weekDoy": 4,
            "weekText": "週",
            "weekTextLong": "Week",
            "cmdFormatter": null,
            "defaultSeparator": " - "
        }
    }
}

Discussion

ログインするとコメントできます