The Setup
I'm using Fullcalendar v4, and I'm having some trouble with extraParams and sending them to server via AJAX.
What I'm trying to do (and failing) is to use this:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction','dayGrid'],
defaultView: 'dayGridMonth',
selectable: true,
selectMirror:true,
.......
eventSources: [{
url: 'ajax/fc.php?dropdown='+$("#dropdown").val(),
method: 'POST',
cache: false,
extraParams: {
month: $("#monthPicker").val(),
dropdown: $("#dropdown").val(),
person: $("#person").val(),
phone: document.getElementById("phone").value,
testtext: 'hardcoded text'
},
}],
......
});
Values for month, dropdown, person, phone are picked up from a form.
The Problem
Dumping both the GET and the POST variables (sever-side), just to check what I've received gives back 0 / empty strings for everything other than the month parameter - it's shown correctly.
The GET parameter is there just for testing purposes, and so is document.getElementById bit - I wanted to see if anything would show up if I used them (nothing did).
The issue persists even if I change the code to use events instead of eventSources.
Upon further experimenting, it seems that the calendar is affected by the element values present upon its initialization - if I hardcode the values for dropdown, person, and other inputs / select elements, they, and only they get sent (any change in values is ignored). The same thing happens if I just set the initial value (ie <input id="person" name="person" value="Joe">).
The question
How can I force the calendar (short of destroying and recreating it) to actually notice changes in the input values I want to use as extraParams?
If I'm misunderstanding the use of extraParams, what are my alternatives? I need to be able to send various data to the server, in order to get a specific set of events.
Figured it out in the meantime, thanks to this SO answer. Since the parameters are dynamic, they need to be sent as stated in the documentation (part Dynamic extraParams parameter):
var calendar = new Calendar(calendarEl, {
events: {
url: '/myfeed.php',
extraParams: function() { // a function that returns an object
return {
dynamic_value: Math.random()
};
}
}
});
Which, in my case, would become:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction','dayGrid'],
defaultView: 'dayGridMonth',
selectable: true,
selectMirror:true,
.......
event: {
url: 'ajax/fc.php',
method: 'POST',
cache: false,
extraParams: function() {
return {
month: $("#monthPicker").val(),
dropdown: $("#dropdown").val(),
person: $("#person").val(),
phone: document.getElementById("phone").value,
testtext: 'hardcoded text'
}
},
},
......
});