Fullcalendar 4.x - Adding header "X-Requested-With: XMLHttpRequest" - fullcalendar

Question

Using Fullcalendar 4.x, is it possible to add the "X-Requested-With: XMLHttpRequest" header when fetching events ?
I'm setting up the event source in this way :
calendar.addEventSource({ url: ev_url, id: 'default' });
Everything works and the request is sent correctly, but the header i mentioned is missing (on server side we require that header to be present).
I tried adding the following to addEventSource:
beforeSend: function (xhr) {
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
}
Another thing i tried was to add this in the js file (probably pointless since Fullcalendar 4 is not using jquery anymore ?):
$.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
}
});
Unfortunately neither solution worked.
In the past when using fullcalendar 3.x that header was present when requesting events. I guess that was because JQuery was adding it automatically.

Answer 1

I was looking for the answer to this as well. I modified the FullCalendar main.js file which is not ideal but does the trick!
I modified the file # around line 4242 here is the full source from that function:
/*! FullCalendar Core Package v4.3.1
function requestJson(method, url, params, successCallback, failureCallback) {
method = method.toUpperCase();
// Set Headers From Params to own varaible
var headers;
if(params.hasOwnProperty('headers') && Array.isArray(params.headers)){
headers = params.headers;
// Remove them from the params object
delete params.headers;
}
var body = null;
if (method === 'GET') {
url = injectQueryStringParams(url, params);
}
else {
body = encodeParams(params);
}
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
// Create Headers If Avaiable
if(typeof headers !== "undefined"){
for(var key in headers){
if (!headers.hasOwnProperty(key)) continue;
var obj = headers[key];
for(var prop in obj){
if (!obj.hasOwnProperty(prop)) continue;
xhr.setRequestHeader(prop, obj[prop]);
}
}
}
if (method !== 'GET') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) {
try {
var res = JSON.parse(xhr.responseText);
successCallback(res, xhr);
}
catch (err) {
failureCallback('Failure parsing JSON', xhr);
}
}
else {
failureCallback('Request failed', xhr);
}
};
xhr.onerror = function () {
failureCallback('Request failed', xhr);
};
xhr.send(body);
}
To Use it I simply add a headers key to the extraParams object like so:
extraParams = {
action: 'get_event',
headers: [
{"X-Requested-With":"XMLHttpRequest"}
]
};
This way you can add as many extra headers as you need.