LaravelでFullcalendarに登録したイベントを削除する方法

#はじめに
こちらは以下の記事の続きになります。
LaravelでFullcalendarを実装する方
LaravelでFullcalendarに登録した内容を更新する方法
ディレクトリ名等も同じものを使用しているので、ご了承くださいませ。

前回までにFullcalendarにイベントの登録と更新はできるようになったので、今回は削除方法について見ていきたいと思います。

-各バージョン
-Laravel 6.x
-PHP 7.4.9
-MySQL 5.7.30
-Fullcalendar v5

#削除ボタンを作成する
前回までに更新用のモーダルを開くと、登録されている情報が確認できているようにしました。
今回は更新用のモーダルに削除ボタンを追加し、このボタンを押すとデータが削除されるようにします。

modal.blade.php

<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
            <header class="modal__header">
                <h2>Editing my task list</h2>
                <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
            </header>
            <main>
　　　　　　　　　<form method="POST" action="{{ route('editEvent') }}">
               　　@csrf
               　　<input type="hidden" id="id" value="" name="id">
　　　　　　　　　　　<input type="text" id="edit_title" name="title" value="">
　　　　　　　　　　　<input type="date" id="edit_start" name="start" value="">
　　　　　　　　　　　<input type="color" id="edit_color" name="textColor" value="">
                  <button class="modal__btn modal__btn-primary" type="submit">変更する</button>
　　　　　　　   </form>
　　　　　　　　// ここから追加
              <form id="delete-event-btn" method="POST" action="{{ route('deleteEvent') }}">
                    @csrf
                    <input type="hidden" name="id">
                    <a href="#" id="delete-event" class="cancel-btn">削除する</a>
                </form>　
　　　　　　　　// ここまで
            </main>
        </div>
    </div>
</div>

前回と同様、カレンダーのイベントを表示させるアクションであるindexアクションではAjaxで通信時のみidを渡すようになっているので（LaravelでFullcalendarを実装する方法）、idはJSで取得するようにします。

更新時にvalueの値を取得するコードを書いているので、こちらに追加していきます。

event.blade.php

<script>
  $(document).ready(function () {
    $('#calendar').fullCalendar({
      // はじめりの曜日を月曜日に変更　デフォルトは日曜日になっており、日=0,月=１になる
      firstDay: 1,
      headerToolbar: {
                     right: 'prev,next'
                     },
      events: '/index',

　　　 eventClick: function(info){
        document.getElementById("id").value = info.id;
        document.getElementById("edit_title").value = info.title
        document.getElementById("edit_start").value = info.start._i
        document.getElementById("edit_color").value = info.textColor
        MicroModal.show('modal-1');
     }
    });

    // ここから追加
    $("#delete-event").on("click", function() {
     var form = document.getElementById("delete-event-btn");
     var eventId = document.getElementById("id").value; // 削除対象のidを前回作成した更新フォームから取得
     form.elements['id'].value = eventId; // 削除対象のidを削除フォームにもセット
     form.submit(); // 削除フォームを送信させる
     });
  });
</script>

#コントローラー、ビューを作成する
先ほど削除ボタンのフォームで指定したactionを指定していきます。

web.php

Route::post('/deleteEvent', 'EventController@deleteEvent')->name('deleteEvent');

最後にコントローラーです。

EventController

public function deleteTask(Request $request) {
  // 送信されてきたidをEventテーブルに登録されているデータと紐付ける
  $task = DoneTask::find($request->input('id'));
  $task->delete();

  return redirect('/event');
}

実際に削除ボタンを押してみると、カレンダーとDBどちらからもデータが削除されてるかと思います。

これで完成です！

#さいごに
今回でFullcalendarにデータの登録、更新、削除まで行うことができました！

Fullcalendarはまだまだアレンジがたくさんできるので、これからも公式マニュアルを見ながらアップデートしていきたいと思います。

最後まで読んでいただいてありがとうございました！