Full Calendar JS Livewire example

calendar.blade.php

<div>
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
    <div wire:ignore id='calendar'></div>

    <script>
        document.addEventListener('livewire:initialized', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridWeek',
                timeZone: 'UTC',
                editable: true,
                selectable: true,
                events: @json($events),
                select: function(data) {
                    var event_name = prompt('Event Name:');
                    if (!event_name) {
                        return;
                    }
                    @this.newEvent(event_name, data.start.toISOString(), data.end.toISOString())
                        .then(
                            function(id) {
                                calendar.addEvent({
                                    id: id,
                                    title: event_name,
                                    start: data.startStr,
                                    end: data.endStr,
                                });
                                calendar.unselect();
                            });

                },
                eventDrop: function(data) {
                    console.log(data.event.id)
                    @this.updateEvent(
                        data.event.id,
                        data.event.name,
                        data.event.start.toISOString(),
                        data.event.end.toISOString()).then(function() {
                        alert('moved event');
                    })
                },
            });
            calendar.render();

        });
    </script>
</div>

Calendar.php

<?php

namespace App\Livewire;

use App\Models\Event;
use Carbon\Carbon;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Validator;
use Livewire\Attributes\Rule;
use Livewire\Component;

class Calendar extends Component
{

    public function newEvent($name, $startDate, $endDate)
    {
        $validated = Validator::make(
            [
                'name' => $name,
                'start_time' => $startDate,
                'end_time' => $endDate,
            ],
            [
                'name' => 'required|min:1|max:40',
                'start_time' => 'required',
                'end_time' => 'required',
            ]
        )->validate();

        $event = Event::create(
            $validated
        );

        return $event->id;
    }

    public function updateEvent($id, $name, $startDate, $endDate)
    {
        $validated = Validator::make(
            [
                'start_time' => $startDate,
                'end_time' => $endDate,
            ],
            [
                'start_time' => 'required',
                'end_time' => 'required',
            ]
        )->validate();

        Event::findOrFail($id)->update($validated);
    }

    public function render()
    {
        $events = [];

        foreach (Event::all() as $event) {
            $events[] =  [
                'id' => $event->id,
                'title' => $event->name,
                'start' => $event->start_time->toIso8601String(),
                'end' => $event->end_time->toIso8601String(),
            ];
        }

        return view('livewire.calendar', [
            'events' => $events
        ]);
    }
}