hook for modifying XHR before JSON feed request

[azuken]

Hello,

I'm trying today to migrate my company's app from v3 to v4, and I'm facing a problem with eventSources component. In v3, we used beforeSend function to get http request, and set Authorization header (for bearer token).

Now in v4, it does not call beforeSend function, and does not use headers params. I didn't find any doc or code from the internet with a solution.

Is it just not implemented ?

We've search in source and found nothing about it too.

What I tried :

(v3 base code)

beforeSend: function (xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
},

(v4)

headers: { 'Authorization': 'Bearer ' + token }

headers: { Authorization: 'Bearer ' + token }

Thanks in advance !

[acerix]

You could supply the events as a function which gives you more control: https://fullcalendar.io/docs/events-function

I believe it's not possible with "events as JSON" currently but we could look at adding that support if you are requesting that feature.

[azuken]

Ok thanks for the link, I will look at it later. For the feature request, is there any procedure to do it ?

[acerix]

This issue can be the "feature request" but we don't have an ETA for adding new features. This page has the details:

https://fullcalendar.io/requesting-features

[arshaw]

in v4, we should offer a hook to manipulate the XHR before it requests. keeping this ticket open for this feature request

[MiguelFaria]

hi @arshaw,

thare is any forecast about when this feature is gona be released ??

[markoangelovski]

Dear @arshaw and team,

In addition to OP's note about setting the Authorization header, may I kindly add that it would be great if the provision was available for setting the xhr.withCredentials = true.

My project is using it for authorization purposes, and currently there is no way for setting this option without modifying the source.

Thank you.

[m8iog]

I don't know if you've solved your problem @azuken, but I found a solution in the event source as a function.

                events: function (info, successCallback, failureCallback) {
                    let start = moment(info.start.valueOf()).format('YYYY-MM-DD');
                    let end = moment(info.end.valueOf()).format('YYYY-MM-DD');
                    $.ajax({
                        url: "api/assignments/?event_id=" + vm.eventId +  '&start='+ start + "&end=" + end,
                        type: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': window.csrf_token
                        }, success: function (response) {
                                successCallback(response);
                        }
                    });
                },

I also used the same approach for the resources, which works for me. It's not the most elegant way, but it gets the job done.

Anyhow, just thought I'd share my solution.

[azuken]

This is exactly how I figured out to solve my problem !

[vinayverghese]

I don't know if you've solved your problem @azuken, but I found a solution in the event source as a function.

                events: function (info, successCallback, failureCallback) {
                    let start = moment(info.start.valueOf()).format('YYYY-MM-DD');
                    let end = moment(info.end.valueOf()).format('YYYY-MM-DD');
                    $.ajax({
                        url: "api/assignments/?event_id=" + vm.eventId +  '&start='+ start + "&end=" + end,
                        type: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': window.csrf_token
                        }, success: function (response) {
                                successCallback(response);
                        }
                    });
                },

I also used the same approach for the resources, which works for me. It's not the most elegant way, but it gets the job done.

Anyhow, just thought I'd share my solution.

Thank you. I just had to tweak it for TypeScript in my case and it worked.

[oldmansutton]

Chiming in to say that being able to pass headers in the events object is essential as the world is using JWT for auth more and more.

[Luis85]

Chiming in to say that being able to pass headers in the events object is essential as the world is using JWT for auth more and more.

I second this, trying to use the json source even with an X-API-KEY is not possible.

Are there any plans to add header params in the near future?

[uflidd]

I second this.

Attempting to make @m8iog's solution to work in the meantime

I don't know if you've solved your problem @azuken, but I found a solution in the event source as a function.

                events: function (info, successCallback, failureCallback) {
                    let start = moment(info.start.valueOf()).format('YYYY-MM-DD');
                    let end = moment(info.end.valueOf()).format('YYYY-MM-DD');
                    $.ajax({
                        url: "api/assignments/?event_id=" + vm.eventId +  '&start='+ start + "&end=" + end,
                        type: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': window.csrf_token
                        }, success: function (response) {
                                successCallback(response);
                        }
                    });
                },

I also used the same approach for the resources, which works for me. It's not the most elegant way, but it gets the job done.

Anyhow, just thought I'd share my solution.

[jdhorner]

I don't want to add noise, but I hope I do add a voice: I'm upgrading my company's (pro-licensed) version of Full Calendar from version 3 to version 5, and among the many frustrating changes, the ability to simply specify a "headers" object on the eventSource being removed is very challenging. I now have to rewrite the entire thing as an event function using my ajax library just for the same purpose. So consider this a vote for hoping to be able to add headers to JSON event feeds ASAP. 💙

[dave1quovadimus]

m8iog; Thank you for the code example. I'm new to FullCalendar, all was going great, but I need to include a nonce, in the header. This could have been a show stopper for me. thanks.