Topic: Full calendar is not rendering on subsequent AJAX calls after the first call
Expected behavior The first ajax call works perfectly. The data is returned and the calendar behaves as expected, updating the events dictionary. All subsequent calls, triggered by clicking on a date - while they return the correct data to the success function, the calendar continues to show data from the first call. It never updates. I have tried two things: - putting cache: false on the AJAX call, and - empty() on the div that displays the data. While the data does empty when calling it, the calendar still does not display with the new data, the div remains empty.
Actual behavior
Resources (screenshots, code snippets etc.)
$.ajax( {
type:"POST",
url: "/teachers/teacherDayAgenda/",
data:{
'event_date': dateClicked
},
dataType: 'json',
cache: false,
success: function( eventData ) {
var lessonEvents = [];
var lesson = {};
for (var key in eventData) {
if (key=="eventDefault")
break;
lesson = {};
lesson['title'] = "Lesson with "+eventData[key]['teacher_name'];
lesson['start'] = formatDate(moment(eventData[key]['timeslot_start']).toDate());
lesson['end'] = formatDate(moment(lesson['start']).add(40, 'm').toDate());
lessonEvents.push(lesson);
}
$('#teacher_schedule').empty();
$('#teacher_schedule').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,listWeek'
},
defaultDate: eventData['event0']['click_event_date'],
navLinks: true,
eventLimit: true,
events: lessonEvents
});
$("#teacher_schedule .fc-agendaDay-button").trigger("click");
}
});
You can test it on the dev site: StudySpot
Credentials:
username: test4@test4.com
password: lkjhlkjh
Then click on Calendar on the profile page.
Then click on a date to see the ajax produced calendar in the overlay.
-Notice the date does not change.
-Test data on April 16th, 2020
You can try to use destroy() function and then reinitialize new callendar.
$('#calendarID').fullCalendar( 'destroy' );
Best,
mickey22 commented 5 years ago
Thanks, that did the trick.
Mateusz Łubianka staff commented 5 years ago
I'm glad I could help.
Best,
function initializeCalendar(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: today,
navLinks: true,
editable: true,
eventLimit: true,
selectable: true,
events: [{
title: 'Simple static event',
start: '2018-11-16',
description: 'Super cool event'
},
],
customButtons: { addEventButton: { text: 'Add Event', class:'AddEventPopup_open', click: function() {
return true;
}}
},
footer: {left: ' ', center: 'addEventButton', right: ' '
},
});
}
mickey22 commented 5 years ago
This is the code for the first calendar on the page. The ajax produces the second one in a popup overlay.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.15.0
- Device: PC
- Browser: Opera
- OS: Win 10
- Provided sample code: No
- Provided link: Yes
Mateusz Łubianka staff commented 5 years ago
Hi @mickey22,
Did you use the code from the example in our documentation? https://mdbootstrap.com/plugins/jquery/full-calendar/
Best,
mickey22 commented 5 years ago
Yes, I used the JS code from the documentation as you can see in the link I provided. There are 2 instances of the calendar on the page. One is displaying the student schedule. The second is generated by ajax when a day is clicked on the calendar. The first click works fine. The second and subsequent clicks display data from the first click.
Mateusz Łubianka staff commented 5 years ago
The code from the above snippet is all the code associated with the calendar on your site?
Best,
mickey22 commented 5 years ago
I put the code for the first calendar below.