【FullCalendar x React】登録済みの予定を削除します

zako-lab929.hatenablog.com

こちらの記事で登録した予定を削除します。

日にちの 空欄をクリックすると予定を登録 できて、登録済みの予定をクリックすると削除 できるような基本的な動きを目指します。

eventClick Prop
- 予定のクリックイベントをハンドリングする
- 予定を削除する
まとめ

eventClick Prop

eventClick Prop を用いて、イベントのクリックをハンドリングします。

予定のクリックイベントをハンドリングする

  export const Calendar = () => {
    const handleDateSelect = (args: DateSelectArg) => {
        ～省略～
    }

+   const handleEventClick = (args: EventClickArg) => {
+     alert(`${args.event.title} をクリックしました`)
+   }

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

予定を削除する

eventClick Prop では EventClickArg を引数で受け取ることができ、EventClickArg.event.remove() で削除することができます。

  const handleEventClick = (args: EventClickArg) => {
-   alert(`${args.event.title} をクリックしました`)
+   if (confirm(`'${args.event.title}' を削除します`)) {
+     args.event.remove()
+   }
  }