Currently developing a calendar using fullcalendar.
I have created an ajax button that retrieves events from another php page.
The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I click the button a second time - the calendar does not reload or render again, leaving me stuck with the initial calendar which is no longer relevant to me.
Does anyone know what the problem might be and how I can ensure that a new calendar is published every time the ajax button is clicked?
Here is the code snippet:
<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')) {
cell.css('background-color', json_backgrundColor[cellDate]);
if (json_iconstring[cellDate].includes('HAV')) {
cell.prepend('<img src=\' icons/havdala2.png \'>');
}
// More icon conditions go here...
} else {
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>