Livewire & FullCalendar

[wik0rl]

I have a Livewire Component which fetches reservations. This reservations get shown in FullCalendar on the front end. This works fine. But as soon as I delete a reservation in the backend and the reservationDeleted events gets fired I receive multiple console errors.

What I am doing wrong?

Livewire Component

class View extends Component
{
    public array $events = [];

    public function mount(): void
    {
        $this->events = $this->getReservations();
    }

    #[On('reservationDeleted')]
    public function refreshEvents(): void
    {
        $this->events = $this->getReservations();
    }

    public function render(): ViewContract
    {
        return view('livewire.reservations.view')
            ->with(['events' => $this->events])
            ->layoutData(['header' => 'Meine Reservierungen']);
    }

    private function getReservations(): array
    {
        $reservations = Reservation::with('desk')
            ->where('start_date', '>=', now()->startOfDay())
            ->where('user_id', Auth::user()->id)
            ->where('series', false)
            ->orderBy('start_date')
            ->get();

        $events = [];

        foreach ($reservations as $reservation) {
            $events[] = [
                'title' => $reservation->desk->name . ' (' . $reservation->desk->location . ')',
                'start' => $reservation->start_date->toIso8601String(),
                'start_human' => $reservation->start_date->format('d.m.Y'),
                'end' => $reservation->start_date->toIso8601String(),
                'id' => $reservation->uuid,
                'allDay' => true,
                'duration' => $reservation->duration,
            ];
        }

        return $events;
    }
}

Relevent part of the Blade View

<div x-data="
    {
        calendar: null,
        calendarVisible: $persist(true),
        events: $wire.get('events'),
        init() {
            // Listen for Livewire initialization to set up the calendar and calendar isn't already set up
            this.$nextTick(() => {
                if (this.calendarVisible && !this.calendar) {
                    this.initCalendar();
                }
            })

            // Listen for Livewire event to remove deleted reservation from calendar
            Livewire.on('reservationDeleted', ({uuid}) => {
                const reservation = this.calendar.getEventById(uuid);

                if (reservation) {
                    reservation.remove();
                } else {
                    console.error(`No reservation found with UUID: ${uuid}`);
                }
            })
        },
        initCalendar() {
            this.calendar = new FullCalendar.Calendar(this.$refs.calendarElement, {
                buttonText: {
                    today: 'Heute'
                },

                initialView: 'dayGridMonth',
                navLinks: true,
                weekends: false,
                eventColor: '#D30E28',
                locale: 'de',
                height: 550,
                eventDisplay: 'block',
                events: this.events,
                eventClick: function (info) {
                    $wire.dispatch('openModal', {
                        component: 'modal.view-reservation',
                        arguments: {
                            id: info.event.id
                        }
                    })
                },
                navLinkDayClick: function (date) {
                    // Get year, month, and day part from the date
                    const year = date.toLocaleString('default', {year: 'numeric'});
                    const month = date.toLocaleString('default', {month: '2-digit'});
                    const day = date.toLocaleString('default', {day: '2-digit'});

                    // Generate yyyy-mm-dd date string
                    const formattedDate = `${year}-${month}-${day}`;

                    window.location.assign('/reservation/create/' + formattedDate)
                }
            });

            this.calendar.render();
        },
        switchTab(tab) {
            if (this.calendarVisible !== (tab === 'calendar')) {
                this.calendarVisible = tab === 'calendar';

                if (this.calendarVisible) {
                    this.$nextTick(() => {
                        if (!this.calendar) {
                            this.initCalendar();
                        } else {
                            this.calendar.render();
                        }
                    });
                }
            }
        }
    }
">

[ekwoka]

The issue is your for loop has multiple items with the same key.

That's the problem. All the rest of it is because of that.

I don't even see where you write this getEvents() function...

My best guess is your system returns event objects for every day of a multi-day event despite them having the same uuid. But I could be wrong, as the logic for getEvents isn't implemented in that code.