【FullCalendar x React】任意の付加情報を設定できるか調べた

予定に対して、タイトルとか以外に付加情報が設定できるか調べました

具体的には、
予定をクリックしたときに React Router を使って別のページに遷移させるための情報が欲しかったのがキッカケです。

URL
- 自動的に画面遷移しないようにするには？
URL 以外のその他の情報の持たせ方
- EventClickArg からの参照方法
まとめ

URL

FullCalendar の events prop には url プロパティが設定できることがわかりました。

  const handleEventClick = (args: EventClickArg) => {
    console.log(args.event.url)
  }
  return (
    <FullCalendar
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      events={[
        {
          title: 'ハロウィン前夜祭',
          start: '2024-10-30',
          color: '#0c0',
        },
        {
          title: 'ハロウィン',
          start: '2024-10-31',
          color: '#c00',
+         url: 'https://example.com'
        },
        {
          title: 'ハロウィン後夜祭',
          start: '2024-11-01',
        },
      ]}
    />
  )

しかし、url プロパティを設定すると自動的に画面遷移してしまうようです。

自動的に画面遷移しないようにするには？

preventDefault() をする必要があります。
EventClickArg には jsEvent があるので、それを使って preventDefault() します。

  const handleEventClick = (args: EventClickArg) => {
+   args.jsEvent.preventDefault()
    console.log(args.event.url)
  }

preventDefault() は、JavaScript の Event インターフェイスのメソッドで、ユーザーエージェントにデフォルトのイベント動作をキャンセルすることを指示するものです。

つまりこれでデフォルト挙動の画面遷移を防ぐことができます。

URL 以外のその他の情報の持たせ方

  return (
    <FullCalendar
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      events={[
        {
          title: 'ハロウィン前夜祭',
          start: '2024-10-30',
          color: '#0c0',
        },
        {
          title: 'ハロウィン',
          start: '2024-10-31',
          color: '#c00',
-         url: 'https://example.com'
+         aaa: 'hoge',
+         bbb: 'foo',
+         description: 'AAAAAA',
        },
        {
          title: 'ハロウィン後夜祭',
          start: '2024-11-01',
        },
      ]}
    />
  )

実は適当なプロパティが持たせられるようです。

EventClickArg からの参照方法

  const handleEventClick = (args: EventClickArg) => {
-   args.jsEvent.preventDefault()
-   console.log(args.event.url)
+   confirm(JSON.stringify(args.event.extendedProps))
  }