Hi All,

I have a page with a LiveWire componant for showing an Fullcalendar events. The page is working well, the events are showing and i can change page, etc.

But, i'm trying to understand how to refetch the events on the calendar, by two way, by a simple button "filtrageAnniversaire", and after a event detail was showed.

I'm lost and confused, and seriously stuck. If someone can help me its will be fantastic.

I can see on the network tool debugger some update fire, but nothing changing on screen.

The composant View :

`<div>

<div style="{{ $visible ? '' : 'display: none' }};">


    <button wire:click="filtrageAnniveraire" class="btn btn-light-primary">{{ $afficheAnniversaires ? 'Masquer les anniversaire' : 'Afficher les anniversaires' }}</button>

    <div id='calendar-container' wire:ignore >
        <div id='calendar'></div>
    </div>
</div>


@push('scripts')


    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.js'></script>
    <script>

        document.addEventListener('livewire:initialized', function() {
            let calendarEl = document.getElementById('calendar');
            let calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                theme: false,
                disableDragging: false,
                disableResizing: false,
                firstDay: 1,
                weekends: true,
                locale: '{{ config('app.locale') }}',
                aspectRatio: 2,
                noEventsMessage: 'Aucune activité pour le moment',
                displayEventEnd: true,
                slotEventOverlap: false,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                eventLimit: false,
                views: {
                    agenda: {
                        eventLimit: 15
                    }
                },
                eventClick: info => {
                    @this.eventDetail(info.event.id, info.event.extendedProps.debutBrut);

                    //calendar.render();
                    @this.on(`refreshCalendar`, () => {
                        calendar.refetchEvents();
                    });

                },
                selectable: true,
                selectHelper: true,
                editable: false,

                eventContent: function(arg) {
                    let customColor = arg.event.extendedProps.eventColor;
                    if (customColor) {
                        arg.backgroundColor = customColor;
                        arg.borderColor = customColor;
                    }
                },
                //events: JSON.parse(@this.events),
                events: function(fetchInfo, successCallback, failureCallback) {
                    @this.call('fetchEvents', fetchInfo.startStr, fetchInfo.endStr)
                        .then(events => successCallback(events))
                        .catch(error => failureCallback(error));
                },
                dayClick: function (date, jsEvent, view) {
                    alert(date.format('DD-MM-YYYY'))
                },
            });

            calendar.render();

            window.addEventListener('refreshCalendar', () => {
                calendar.refetchEvents();
            });


        });
    </script>
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.css' rel='stylesheet' />
@endpush

The LiveWire componant :

namespace App\Livewire; use App\Models\ActiviteEleve; use Carbon\Carbon; use Livewire\Component; `class ActivitesElevesCalendrier extends Component { public $events = []; public $visible = true; public $afficheAnniversaires = true; public $start; public $end;

protected $listeners = [
    'triggerRendreVisibleActiviteElevesCalendrier',
    'refreshCalendar'
];

public function triggerRendreVisibleActiviteElevesCalendrier()
{
    $this->visible = true;
    $this->events = $this->fetchEvents($this->start, $this->end);
    return view('livewire.activites-eleves-calendrier');
}

public function render()
{
    return view('livewire.activites-eleves-calendrier');
}

public function fetchEvents($start, $end)
{
    $this->start = $start;
    $this->end = $end;

    $start = Carbon::parse($this->start);
    $end = Carbon::parse($this->end);

    if($this->afficheAnniversaires) {

        $activitesEleves = ActiviteEleve::whereHas('activite', function ($query) {
            $query->where('activiteAppel',0)->where('activiteAnniversaire',0);
        })->whereBetween('debut', [$start, $end])->get();

    } else {

        $activitesEleves = ActiviteEleve::whereHas('activite', function ($query) {
            $query->where('activiteAppel',0);
        })->whereBetween('debut', [$start, $end])->get();
    }

    $eventsGrouped = [];

    foreach ($activitesEleves as $activiteEleve) {

        $key = $activiteEleve->activite_id . '|' . $activiteEleve->debut->format('Y-m-d H:i:s');

        if (!isset($eventsGrouped[$key])) {
            $eventsGrouped[$key] = [
                'id' => $activiteEleve->activite_id,
                'start' => $activiteEleve->debut->format('Y-m-d H:i:s'),
                'end' => optional($activiteEleve->fin)->format('Y-m-d H:i:s'),
                'debutBrut' => $activiteEleve->debut,
                'title' => $activiteEleve->activite->nom . '(1)',
                'eventColor' => $activiteEleve->activite->couleur,
                'compteur' => 1
            ];
        } else {
            $eventsGrouped[$key]['compteur']++;
            $eventsGrouped[$key]['title'] = $activiteEleve->activite->nom . ' (' . $eventsGrouped[$key]['compteur'] . ')';
        }
    }
    return array_values($eventsGrouped);
}


public function eventDetail($activite_id, $debut)
{
    $this->dispatch('triggerShowDetailActiviteEleve', [$activite_id , $debut, 'activites-eleves-calendrier']);
    $this->visible = false;
}

public function filtrageAnniveraire()
{
    $this->afficheAnniversaires = !$this->afficheAnniversaires;
    $this->events = $this->fetchEvents($this->start, $this->end);
    $this->dispatch('refreshCalendar');
    return view('livewire.activites-eleves-calendrier');
}

public function refreshCalendar()
{
    $this->events = $this->fetchEvents($this->start, $this->end);
    $this->dispatch('refreshCalendar');
}

}`

Thanks a lot for your help.