How to reload FullCalendar Contact when the value of a menu change using jQuery?

Question

I am using the FullCalendar plugin in my site to display calender event. What I am trying to add now is a drop down menu with name and if the drop down menu change value then Reload the events based on the value of the menu.

If another words, by default i load events owned by me. The drop down menu will have all users in one menu. From that menu I can change the user name to view other users events on the same page.

I have tried to add a .change() event on the drop down menu and refetchEvents on the fullCalendar but it is not working.

Can someone please help me with reloading this events by passing the value of the $('#users_menu').

The following is my current code

$(document).ready(function() {

    $('#calendar').fullCalendar({

        header: {
          right: 'prev,next today',
          center: 'title',
          left: 'month,agendaWeek,agendaDay'
        },      

        events: {
            url: "ajax/getMyEvents.php",
            type: 'POST',
            data: {
                user_id: $('#users_menu').val()
            }
        },
        timeFormat: 'h:mm TT{ - h:mm} TT',
        defaultView: 'agendaDay',


        eventDrop: function(event, delta, minuteDelta, allDay, revertFunc) {

            if (!confirm("Are you sure about this change?")) {
                revertFunc();
            }
            updateEvent(event, delta, minuteDelta, allDay, 'Drop', revertFunc); 
        },

        eventResize: function(event, delta, minuteDelta, revertFunc) {

            if (!confirm("Are you sure about this change?")) {
                revertFunc();
            }
            updateEvent(event, delta, minuteDelta, false, 'endResize', revertFunc); 
        }


    });


    $('#users_menu').change( function(){

        $('#calendar').fullCalendar( 'refetchEvents' );
    });

});

Note that i pass my user_id value in my data method.

This code works on the load but when I change the user name in the drop down menu it does not reload the new events.

How can I get this to work?

Answer 1

I finally fixed it.

I had to removeEventSource then √ then refetchEvents for this to work which is not cool :)

Here is my solution code for this

$('#users_menu').change(function() {

    var events = {
        url: "ajax/getMyEvents.php",
        type: 'POST',
        data: {
            user_id: $(this).val()
        }
    }

    $('#calendar').fullCalendar('removeEventSource', events);
    $('#calendar').fullCalendar('addEventSource', events);
    $('#calendar').fullCalendar('refetchEvents');
}).change();