はじめに
前回に続き、今回はFullcalendarで登録した情報を更新する方法についてご説明します。
LaravelでFullcalendarを実装する方法
また、今回はカレンダー上の登録したイベントをクリックするとモーダルが出てきて、そのモーダル上で更新ができるようにします。モーダルでは更新前の情報も確認できるようにしたいと思います。
-各バージョン
-Laravel 6.x
-PHP 7.4.9
-MySQL 5.7.30
-Fullcalendar v5
フォルダ名とうは登録時に作成したものをそのまま使用しておりますのでご了承ください。
更新用のモーダルを用意する
モーダルはJavaScriptのプアグインであるMicromodal.jsを使用しました。
モーダルに関しては自作のものではなく、プラグインを利用した方が利点が多いというツイートを見かけたので、今回は自作をせずにプラグインを使用しています。
Micoromodal.jsのダウンロードは以下から行えます。
(https://micromodal.now.sh/)
今回はCDNで読み込ませました。
<!-- Micromodal.js -->
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
続いて、モーダル用のbladeを作成し、更新フォームを作っていきます。
こちらはこの後@includeでevent.blade.php内で読み込ませるので、直接event.blade.php内に書いても問題ないです。
また、headerに関してはMicromodal.jsの公式ドキュメントを参考にしています。
フォームはmainタグ内に書いていきます。
<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>
</main>
</div>
</div>
</div>
通常だとvalueに更新前の情報を入れることで、フォームで確認できるのですが、今回はJSで指定するので空にしています。
続いて、カレンダー上のイベントをクリックした際に、モーダルが出てくるように設定していきます。
カレンダー上のイベントをクリックした時の挙動は、Fullcalendarの公式ドキュメントを確認すると、eventClickというプロパティが用意されているようなので、こちらを前回作成したJSに追加していきます。
eventClick
<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');
}
});
});
</script>
infoの中には更新前の情報が入っているので、その情報をそれぞれ先ほど指定したフォーム内のid属性をgetElementByIdで取得し、value値に指定しています。
また、startに関しては、console.log(info.start)で見てみると、_isAMomentObject: true, _i: "2021-02-06", _f: "YYYY-MM-DD", _isUTC: true, _pf:となっており、_iの箇所に日付が格納されているのがわかると思います。
そのため、info.start._iとすることで日付を取得するようにしています。
これで、更新前の情報が表示されるようになりました。
また、event.blade.php内でmodal.blade.phpを忘れずに読み込んでください。
私は前回作成した新規登録用のフォームの真下に書きました。
@include('modal')
コントローラー、ビューを追加する
先ほどaction="{{ route('editEvent') }}で指定したルートを設定します。
Route::post('/editEvent', 'EventController@editEvent');
続いてコントローラーです。
use App\Models\Event; //冒頭で宣言する
public function editEvent(Request $request)
{
// 送信されてきたidをEventテーブルに登録されているデータと紐付ける
$event = Event::find($request->input('id'));
$event->title = $request->input('title');
$event->start = $request->input('start');
$event->textColor = $request->input('textColor');
$event->save();
return redirect('/event');
}
以上で更新用モーダルの完成です！
さいごに
今回は、前回作成したFullcalendarの更新処理を、モーダルを利用して作ってみました。
また次回以降は登録したデータの削除方法についても書いていきたいと思います！
最後まで読んでいただきありがとうございました！