Question

Sorry for this most likely simple question. I would like to add some custom JSON data to fullCalendar and use it in my dayClick callback function. More specific I want to access and change elements on customData in dayClick. However I could not figure out how to do that. Is it possible without changing the fullcalendar source code?

Thanks a lot in advance
Jens

$('#calendar').fullCalendar({
    ....
    firstDay: 1,
    customData: { foo: 'bar', more: 'baz' },
    dayClick: function(date, allDay, jsEvent, view) {
        // Within the callback function, this is set to the <td> of the clicked day.
        var t = $(this);
        var foo = customData.foo; // does not work
        customData.more = 'foo'; // does not work

        // Change the day's background color
        if (t.hasClass('badge-important') && foo == 'bar') {
            t.removeClass('badge-important');               
        } else {
            t.addClass('badge-important');              
        }
    },
});

Answer 1

The problem is that you are not defining a customData variable in any place. The following approach of creating a variable to store your JSON will solve your problem. Check the code below:

var customData = {"foo":"bar"};

$('#calendar').fullCalendar({
....
firstDay: 1,
customData: customData,
dayClick: function(date, allDay, jsEvent, view) {
    // Within the callback function, this is set to the <td> of the clicked day.
    var t = $(this);
    var foo = customData.foo; // will now work
    customData.more = 'foo' // will work too

    // Change the day's background color
    if (t.hasClass('badge-important') && foo == 'bar') {
        t.removeClass('badge-important');               
    } else {
        t.addClass('badge-important');              
    }
},
});

I hope it helped. Cheers