JQuery fullcalendar send custom parameter and refresh calendar with JSON

fullcalendarjqueryjson

I'm trying to use the jQuery fullcalendar. The event data comes from the server using JSON.
My page has a dropdown element and the fullcalendar div.

What I need is to refresh the calendar each time the user changes the dropdown. The selected value of the dropdown should be posted to the server in order to fetch the new event data.

Here is my code:

     $(document).ready(function() {
        $('#calendar').fullCalendar({
            events: {
                url : '/myfeed',
                data : {personId : $('#personDropDown').val() }
            }
        });

        $('#personDropDown').change(function(){
            $('#calendar').fullCalendar('refetchEvents');
        });

    });

However, the code above doesn't work.
Any help?

Best Solution

try this:

$(document).ready(function () {
    $('#calendar').fullCalendar({
        events: {
            url: '/myfeed',
            data: function () { // a function that returns an object
                return {
                    personId: $('#personDropDown').val(),
                };

            }
        });


    $('#personDropDown').change(function () {
        $('#calendar').fullCalendar('refetchEvents');
    });

});