单击Ajax后，无法重新加载FullCalendar Div

Question

我通过Fullcalendar来衡量日历。

IM制作了一个Ajax按钮，只会从另一个PHP页面获取事件。

ajax按钮正常工作，我可以通过事件获得JSON，并且我获得了一个不错的月历显示（在AJAX按钮上的第一个clicl上）。

我唯一的问题是：当我在Ajax按钮上单击seconed时间时，日历不会重新加载/Replisish/Render ..，而IM坚持使用第一个日历（对我来说是Imelevent）。

任何人知道问题是什么，我该怎么办才能在Ajax按钮上的每次点击时重新发布新日历？

这是代码：

<form id="my-form-id" method="post" action="Calendar_form3.php"> Year:
    <INPUT NAME="gregorian_year" SIZE=4 MAXLENGTH=4 value="2016">(1-6000) Latitude:
    <INPUT NAME="latitude" value="40.7127"> Longitude:
    <INPUT NAME="longitude" value="-74.0059"> <button id="ajax-button" type="button">Ajax button</button> </form>
<script>
    function displayCalendar() {
        var target = document.getElementById("main");
        var formData = new FormData(document.getElementById("my-form-id"));
        console.log(formData);
        var xhr = new XMLHttpRequest();
        xhr.open('post', 'JewishCalendar_form3.php', true);
        xhr.onreadystatechange = function() {
            console.log('readyState: ' + xhr.readyState);
            if (xhr.readyState == 2) {
                target.innerHTML = 'Loading...';
            }
            if (xhr.readyState == 4 && xhr.status == 200) {
                var Month_details_for_display = JSON.parse(xhr.responseText);
                //var Month_details_for_display= JSON.parse(Month_details_for_display2);
                target.innerHTML = "funciton will start working...";
                displayCalendar222(Month_details_for_display);
            }
        }
        xhr.send(formData);
    }
    function displayCalendar222(Month_details_for_display) {
        alert("Hello! I am an alert box!!");
        var Events_In_Json = Month_details_for_display['EventsInSameStractureForAll'];
        var json_backgrundColor = Month_details_for_display['Big_Calendar_cell_background_color'];
        var json_iconstring = Month_details_for_display['iconString'];
        var DefaulteDateForFullCalendarISO8601 = Month_details_for_display['fullMonthDetails']['DefaulteDateForFullCalendarISO8601'];
        $('#calendar').fullCalendar({
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            events: Events_In_Json,
            fixedWeekCount: false,
            defaultDate: DefaulteDateForFullCalendarISO8601,
            dayRender: function(date, cell) {
                var cellDate = date.format('D');
                if (!cell.hasClass('fc-other-month')) {
                    //if this if is true that means that the day belongs to the current relevent month (and not the prev  next month)
                    cell.css('background-color', json_backgrundColor[cellDate]);
                    //from here: cheking which icons to show
                    if (json_iconstring[cellDate].includes('HAV')) {
                        cell.prepend('<img src=' icons/havdala2.png '>');
                    }
                    if (json_iconstring[cellDate].includes('Mod')) {
                        cell.prepend('<img src=' icons/israel.png '>');
                    }
                    if (json_iconstring[cellDate].includes('Jewish')) {
                        cell.prepend('<img src=' icons/jewish.png '>');
                    }
                    if (json_iconstring[cellDate].includes('PAR')) {
                        cell.prepend('<img src=' icons/parasha.png '>');
                    }
                    if (json_iconstring[cellDate].includes('CL')) {
                        cell.prepend('<img src=' icons/cl.png '>');
                    }
                    if (json_iconstring[cellDate].includes('Pub')) {
                        if (json_iconstring[cellDate].includes('USA')) {
                            cell.prepend('<img src=' icons/usa.png '>');
                        } else if (json_iconstring[cellDate].includes('UK')) {
                            cell.prepend('<img src=' icons/uk.png '>');
                        } else if (json_iconstring[cellDate].includes('CA')) {
                            cell.prepend('<img src=' icons/canada.png '>');
                        } else if (json_iconstring[cellDate].includes('AUS')) {
                            cell.prepend('<img src=' icons/australia.png '>');
                        } else if (json_iconstring[cellDate].includes('FR')) {
                            cell.prepend('<img src=' icons/france.png '>');
                        }
                    }
                    //until here:: cheking which icons to show
                } else {
                    //this days belongs to the prev  next months. so we give them opacity)        
                    cell.css('background-color', '#ffffff');
                }
            },
        });
    }
    var button = document.getElementById("ajax-button");
    button.addEventListener("click", displayCalendar);
</script>
<div id='main'> result here </div>
<div id='calendar'></div>

Answer 1

单击按钮的第二次，您应该调用类似的内容：

$('#calendar').fullCalendar('render');

或在再次渲染之前完全破坏了光泽，类似于：

$('#calendar').fullCalendar('destroy')
              .empty()
              .fullCalendar({
                 //...
              });

见

• https://fullcalendar.io/docs/display/render/
• https://fullcalendar.io/docs/display/destroy/