Refresh FullCalendar after delete via Livewire

I have a Livewire Component where I implemented FullCalendar

<?php

class View extends Component
{
    public function render()
    {
        return view('livewire.reservations.view')
            ->with('events', $this->getCalendarReservation())
            ->layoutData(['header' => 'Meine Reservierungen']);
    }

    private function getCalendarReservation(): array
    {
        $events = [];

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

        foreach ($reservations as $reservation) {
            $events[] = [
                'title' => $reservation->desk->name . ' (' . $reservation->desk->location . ')',
                'start' => $reservation->start_date,
                'id' => $reservation->uuid,
                'allDay' => true
            ];
        }

        return $events;
    }
}

and the view

<div>
    <div id="calendar"></div>

    <script>
        document.addEventListener('livewire:load', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                buttonText: {
                    today: 'Heute'
                },
                weekends: false,
                eventColor: '#D30E28',
                locale: 'de',
                initialView: 'dayGridMonth',
                height: 650,
                eventDisplay: 'block',
                events: @json($events),
                eventClick: function(info) {
                    Livewire.emit('openModal', 'modal.view-reservation', {id: info.event.id})
                }
            });
            Livewire.on('ReservationDeleted', () => {
               calendar.refetchEvents();
            });
            calendar.render();
        });
    </script>
</div>

After the user confirms that he wants to delete his reservation, the reservation gets deleted and the event ReservationDeleted gets fired. But the calendar doesn't refresh and the deleted reservation is still shown. After refreshing the full page the reservation dissapears in the calendar. Why does the calendar not refresh?

sickiqq

2 years ago

Level 1

Hey! ... could you fix this? i have the same problem :(

gordett

1 year ago

Level 1

do you have news about this topic?

wikorl

1 year ago

Level 13

Yes, thats my final solution which works. I delete the entries in Livewire and send via the "ReservationDeleted" event the deleted UUIDs of the backend and delete them on the frontend, too.

    document.addEventListener('livewire:initialized', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            buttonText: {
                today: 'Heute'
            },
            validRange: function (nowDate) {
                return {
                    start: nowDate,
                }
            },
            navLinks: true,
            weekends: false,
            eventColor: '#D30E28',
            locale: 'de',
            initialView: 'dayGridMonth',
            height: 550,
            eventDisplay: 'block',
            events: @json($events),
            eventClick: function (info) {
                Livewire.dispatch('openModal', {
                    component: 'modal.view-reservation',
                    arguments: {
                        id: info.event.id
                    }
                })
            },
            navLinkDayClick: function (date) {
                // Get year, month, and day part from the date
                var year = date.toLocaleString("default", {year: "numeric"});
                var month = date.toLocaleString("default", {month: "2-digit"});
                var day = date.toLocaleString("default", {day: "2-digit"});

                // Generate yyyy-mm-dd date string
                var formattedDate = year + "-" + month + "-" + day;

                window.location.assign('/reservation/create/' + formattedDate)
            }
        });
        window.addEventListener('ReservationDeleted', function (event) {
            // Check if only one UUID was sent by Livewire
            if (event.detail.uuid) {
                // get the calendar entry
                var reservation = calendar.getEventById(event.detail.uuid)
                // delete the entry
                reservation.remove()
            }
            // Check if an Array of UUIDs was sent by Livewire
            if (event.detail.reservations) {
                // save the array
                var reservations = event.detail.reservations
                // iterate through the array
                for (const reservation of reservations) {
                    // get the calendar entry
                    var calendarEvent = calendar.getEventById(reservation)
                    // delete the entry
                    calendarEvent.remove()
                }
            }
        });
        calendar.render();
    });

Please or to participate in this conversation.