jquery fullcalendar send custom parameter and refresh calendar with JSON

Question

im 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

Answer 1

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');
    });

});

Answer 2

This works on at least 2.0.2. data becomes a function that returns an object populated with dynamic dropdown values. change is added to refresh the calendar when a new dropdown value is selected.

$("#calendar").fullCalendar({
    events: {
        url: "/myfeed",
        data: function() {
            return {
                dynamicValue: $("#dropdownList").val()
            };
        },
        type: "POST"
    }
});

$("#dropdownList").change(function () {
    $("#calendar").fullCalendar("refetchEvents");
});

Answer 3

I did it using this :

$('#calendar').fullCalendar( 'destroy' );

when I select other option in the dropdown, I don't know if is elegant but works!

Answer 4

I could not get that to work either. So I ended up with solution similar to this:

$('#personDropDown').change(function () {
            var source = {
                data: {
                    filter: $('#personDropDown').val()
                },
                 url : '/myfeed'
            };
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', source);
        });

Answer 5

I refresh this way after an ajax event adds an event using a modal for instance:

$('#cal').fullCalendar('removeEvents');
$('#cal').fullCalendar('addEventSource', "../calendar/json-events2.php")
$('#cal').fullCalendar('rerenderEvents');