Calendar Display Issue

I have a calendar which used a selectbox to control which calendar is displayed. The id of selectbox is passed along with the start/end dates (using events as json feed below). The calendar loads fine, but when I change the v开发者_开发问答alue of the select box, the calendar does not change and uses the initial id. I searched docs but cannot figure out how to get aid below to be dynamic?

$('#calendar').fullCalendar({

  header: {
    left: 'prev,next today',
    center: 'title'
  },
  defaultView: 'agendaWeek',
  weekends: false,
  height: 690,
  theme: true,
  minTime: 6,
  maxTime: 18,
  allDaySlot: false,
  slotMinutes: 30,
  events: {
    url: 'lib.cfc?method=getReservations',
    type: 'POST',
    data: {
      aid: $('#ddNavSelectArea').val()
    },
    error: function(){
      alert('there was an error while fetching events!');
    }
  }
})

I figured it out, I'll chalk it up to my learning curve for fullCalendar:

aid = $('#ddNavSelectArea').val();

var events = {
  url: 'lib.cfc?method=getAreas',
  type: 'POST',
  data: {
    aid: aid
  },
  error: function(){
    alert('there was an error while fetching events!');
  }
}


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

I tried to do it as you did, but it didn't work for me. In the end, I used a events function as this one:

    events: function(start, end, callback) {
        $.ajax({
            url: 'YOURURL',
            type: 'POST',
            dataType: 'json',
            data: {
                start: Math.round(start.getTime() / 1000),
                end: Math.round(end.getTime() / 1000),
                    // this is the var the user is selecting in a drop-down
                event_type: $('#event_type').val()
            },
            success: function(doc) {
                var events = doc;
                callback(events);
            }
            });
    },