I'm currently using Fullcalendar.io for presenting a calendar but the documentation is poor about a function : eventDataTransform

Indeed, I would like tell to fullcalendar, look to this part of my JSON (from AJAX request) for your data.

Because in JSON object, I send my csrf token. My JSON object would look like this:

{
  "data": [ ...(json for fullcalendar)...],
  "csrf": "randomString"
}

And I want to tell to fullcalendar that its data are in jsonObj.data

My fullcalendar init but eventDataTransform doesn't work:

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },
        eventDataTransform: function (json) {
            return json.data;
        },
        aspectRatio: 2,
        defaultView: 'agendaWeek',
        timezone: 'Europe/Paris',
        scrollTime: h + ':' + m + ':' + s,
        lang: 'fr',
        defaultTimedEventDuration: '01:00:00',
        allDaySlot: false,
        buttonIcons: false,
        weekNumbers: true,
        editable: false,
        axisFormat: 'HH:mm',
        timeFormat: {
            agenda: 'HH:mm'
        },
        eventLimit: false,
        eventSources: [
            //dispo
            {
                url: 'planning/on',
                color: '#5cb85c',
                textColor: 'white',
                type: 'POST'
            },
            //off
            {
                url: 'planning/off',
                color: '#757575',
                textColor: 'white',
                type: 'POST'
            },
            //rdv
            {
                url: 'planning/rdv',
                color: '#0086b3',
                textColor: 'white',
                type: 'POST'
            },
            //audiotel
            {
                url: 'planning/audiotel',
                color: '#a94442',
                textColor: 'white',
                type: 'POST'
            }
        ]
    });

I'm currently using Fullcalendar.io for presenting a calendar but the documentation is poor about a function : eventDataTransform

Indeed, I would like tell to fullcalendar, look to this part of my JSON (from AJAX request) for your data.

Because in JSON object, I send my csrf token. My JSON object would look like this:

{
  "data": [ ...(json for fullcalendar)...],
  "csrf": "randomString"
}

And I want to tell to fullcalendar that its data are in jsonObj.data

My fullcalendar init but eventDataTransform doesn't work:

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },
        eventDataTransform: function (json) {
            return json.data;
        },
        aspectRatio: 2,
        defaultView: 'agendaWeek',
        timezone: 'Europe/Paris',
        scrollTime: h + ':' + m + ':' + s,
        lang: 'fr',
        defaultTimedEventDuration: '01:00:00',
        allDaySlot: false,
        buttonIcons: false,
        weekNumbers: true,
        editable: false,
        axisFormat: 'HH:mm',
        timeFormat: {
            agenda: 'HH:mm'
        },
        eventLimit: false,
        eventSources: [
            //dispo
            {
                url: 'planning/on',
                color: '#5cb85c',
                textColor: 'white',
                type: 'POST'
            },
            //off
            {
                url: 'planning/off',
                color: '#757575',
                textColor: 'white',
                type: 'POST'
            },
            //rdv
            {
                url: 'planning/rdv',
                color: '#0086b3',
                textColor: 'white',
                type: 'POST'
            },
            //audiotel
            {
                url: 'planning/audiotel',
                color: '#a94442',
                textColor: 'white',
                type: 'POST'
            }
        ]
    });

• javascript
• fullcalendar

Share Improve this question Follow edited Nov 11, 2015 at 23:52 Peter T asked Nov 10, 2015 at 15:10 Peter TPeter T 2311 silver badge66 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

eventDataTransform never worked for me (function never fired). I had to load my calendar events from a JSON endpoint like this:

events: function(start, end, timezone, callback){
    $.ajax({
        url: 'myEndpointJSON',
        type: 'POST',
        dataType: 'json',
        data: {
            custom_param: '123val',
            start: start.format("YYYY-MM-DD"),
            end: end.format("YYYY-MM-DD")
        },
        success: function(result) {
            var events = [];
            result.data.forEach(function(obj) {
                events.push({
                    id: obj.id,
                    title: obj.name,
                    start: obj.begin,
                    end: obj.end
                });
            });
            $('.spinner').remove(); //remove busy spinner
            callback(events);
        }
    });
},
loading: function(isLoading){
    if (isLoading){
        $('#submit_btn').after(spinner); // show busy spinner
    }
},

eventDataTransform assumes the data is received as an array of event-like objects. each individual event-object it filtered through this function, not the data structure as a whole. what you want is the proposed eventDataFransform: https://github./fullcalendar/fullcalendar/issues/2431

The function needs to return an Event object. If all the required fields are in json.data you can use

function( json ) {
    return json.data;
}

You add this function during the initialisation:

$('#calendar').fullCalendar({
    //.. other stuff,
    eventDataTransform: function( json ) {
        return json.data;
    }
});

eventDataTransform only be called when your response return array, and will be executed one for each item in your array.

If you server returns a wrapper object, use eventSourceSuccess(https://fullcalendar.io/docs/v4/eventSourceSuccess) instead.