【livewire × FullCalendar】動的なスケジュールアプリを作ろう。Part2【ドラッグ&ドロップで予定移動】

前回

https://zenn.dev/sgrs38/articles/868826479a5fb1

予定一覧コンポーネントを改修

LivewireAlert読み込み

use LivewireAlert;

app/Http/Livewire/Schedule/Index.php

<?php

namespace App\Http\Livewire\Schedule;

use App\Models\Schedule;
use App\Models\User;
use Carbon\CarbonImmutable;
use Jantinnerezo\LivewireAlert\LivewireAlert;
use Livewire\Component;

class Index extends Component
{
    use LivewireAlert;

コンポーネント:PHP側追記

app/Http/Livewire/Schedule/Index.php

//予定の移動
public function moveEvent($info):void
{
	$startDateTime = (new CarbonImmutable($info['event']['start']));
	$endDateTime = (new CarbonImmutable($info['event']['end']));
	$schedule = Schedule::query()
	->find($info['event']['extendedProps']['schedule_id']);
	$schedule->day = $startDateTime->format('Y-m-d');
	$schedule->start = $startDateTime->format('H:i');
	$schedule->end = $endDateTime->format('H:i');
	if (!is_null($info['newResource'])) {
	    $schedule->user_id = $info['newResource']['id'];
	}
	$schedule->save();
	$this->alert('success', '移動完了');
	$this->refreshCalendar();
}

コンポーネント:Blade側追記

FullCalendarの設定部分に追記します。

resources/views/livewire/schedule/index.blade.php

//ドラッグなどでのイベント変更許可
editable:true,
//イベントをドロップした時の処理
eventDrop: function (info) {
    @this.moveEvent(info);
},

こんな感じに動く