はじめに
こちらは以下の記事の続きになります。
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はまだまだアレンジがたくさんできるので、これからも公式マニュアルを見ながらアップデートしていきたいと思います。
最後まで読んでいただいてありがとうございました！