ajax投稿の後にfullcalendar divをリロードすることはできません。

Question

Im bulding via calendar fullcalendar

imはajaxボタンを作っただけで別のPHPページからイベントを取得します。

ajaxボタンはうまく動作し、イベントでjsonを取得できます。私はajaxボタンの最初のcliclでカレンダーを表示できます。

私の唯一の問題は、ajaxボタンの時間をクリックすると、カレンダーはリロード/再発行/レンダリングされません。そして、imは最初のカレンダー（これは私にとってはireleventです）。

誰でも問題は何かを知っていますし、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

ボタンをクリックする2回目は、あなたが何かを呼び出す必要があります：

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

または完全にそれを再度レンダリングする前にカレンダーを破壊し、何かここ

コードです：

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

0を参照してください。答えをの

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