【FullCalendar x React】ユーザーアクションをできるようにする

カレンダーに予定を入れる

FullCalendar の続きです

今日は React の FullCalendar で、カレンダーに予定を登録できるようにしていきます

カレンダーの日付を選択する方法
イベントを登録する
現時点での問題点を発見
まとめ

カレンダーの日付を選択する方法

FullCalendar の Props に select というものがあるので、そこにイベントハンドラーを登録すれば良いのかと思いきや、やることが3個ありました。

interaction プラグインを設定する
selectable Props を true にする
select Props でイベントをハンドリングする

fullcalendar.io

1. interaction プラグインを設定する

interaction プラグインを有効にするには、追加のモジュールが必要になります。

$ yarn add @fullcalendar/interaction

+ import interactionPlugin from '@fullcalendar/interaction'

  export const Calendar = () => {
    return (
      <Box sx={{ width: '100%' }}>
        <FullCalendar
-         plugins={[dayGridPlugin]}
+         plugins={[dayGridPlugin, interactionPlugin]}

2. `selectable` Props を true にする

  import interactionPlugin from '@fullcalendar/interaction'

  export const Calendar = () => {
    return (
      <Box sx={{ width: '100%' }}>
        <FullCalendar
          plugins={[dayGridPlugin, interactionPlugin]}
+         selectable={true}

3. `select` Props でイベントをハンドリングする

  import interactionPlugin from '@fullcalendar/interaction'

  export const Calendar = () => {
+   const handleDateSelect = (args: DateSelectArg) => {
+     alert(`START: ${args.start}\nEND: ${args.end}`)
+   }

    return (
      <Box sx={{ width: '100%' }}>
        <FullCalendar
          plugins={[dayGridPlugin, interactionPlugin]}
          selectable={true}
+         select={handleDateSelect}

イベントを登録する

handleDateSelectのメソッドを改造していきます。

  const handleDateSelect = (args: DateSelectArg) => {
-   alert(`START: ${args.start}\nEND: ${args.end}`)
+   const title = prompt('予定のタイトルを入力してください')
+   const calendarInstance= args.view.calendar
+
+   calendarInstance.unselect()
+   if (title) {
+     calendarInstance.addEvent({
+       title,
+       start: args.startStr,
+       end: args.endStr,
+       allDay: args.allDay,
+     })
+   }
  }