how to refresh fullcalendar v4 after change events object using ajax

Question

i use fullcalendar v4 to show events. events shows in load normally ,but i need to add a filter using multiple checkboxes and refresh fullcalendar events after onchange che

Answer 1

What I do : destroy calendar and re render it

1. do not load calendar as indicated in the doc, but :

function LoadCalendar() {
        if (typeof calendar != "undefined") {
            document.getElementById("calendar").innerHTML = "";
        }
        var calendarEl = document.getElementById('calendar');
        calendar = new FullCalendar.Calendar(calendarEl, {
        //... parameters
        });
        calendar.render();
    }

2. Then at load :

function FirstCalendar() {
        MesEvents = "$events"; // Ajax script is executed and give $events
        LoadCalendar();
    }
        document.addEventListener('DOMContentLoaded', FirstCalendar);

3. And finnaly, for Ajax update :

function makeRequest(event) {
        //... ajax instructions
        httpRequest.onreadystatechange = function() { changeContents(httpRequest); };
        httpRequest.open('POST', 'url/ajax.php', true);
        httpRequest.send(oData);
    }
    function changeContents(httpRequest) {
        try {
            if (httpRequest.readyState == XMLHttpRequest.DONE) {
                if (httpRequest.status == 200) {
                    reponse = JSON.parse(httpRequest.responseText);
                    MesEvents = JSON.parse(reponse.Events);
                    LoadCalendar();
                } else {
                    alert('Un problème est survenu avec la requête : ' + httpRequest.status);
                }
            }
        }
        catch( e ) {
            alert(\"Une exception s’est produite (changeContents) : \" + e.description);
        }
    }