How to add custom header to fullcalendar sources

Question

I need to attach a custom header to the ajax request of fullcalendar.

$('#calendar').fullCalendar({
    eventSources: [
        {
            url: '/myfeed.php',
        }    
    ]

});

How do I define that?

Answer 1

Looking at the documentation , the following is stated:

jQuery $.ajax options

You can also specify any of the jQuery $.ajax options within the same object! This allows you to easily pass additional parameters to your feed script, as well as listen to ajax callbacks.

Following this, the documentation for $.ajax() has the following option:

headers (default: {})

Type: PlainObject

An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport. The header X-Requested-With: XMLHttpRequest is always added, but its default XMLHttpRequest value can be changed here. Values in the headers setting can also be overwritten from within the beforeSend function. (version added: 1.5)

So the below code should work:

$('#calendar').fullCalendar({
    eventSources: [
        {
            url: '/myfeed.php',
            headers: { myCustomHeader: 'My Custom Value' }
        }    
    ]
});

Answer 2

Figured, it was actually as easy as supplying a headers key:

$('#calendar').fullCalendar({
    eventSources: [
        {
            url: '/myfeed.php',
            headers: {
                'Authorization': 'foo'
            }
        }
    ]
});