Calendar Display Issue

Question

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

score 2 · Answer 1 · answered Oct 09 '11 at 03:30

2

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

answered Oct 09 '11 at 03:30

Jeff

211
1
4
14

thank you, worked like a charm in my problem: http://stackoverflow.com/questions/9801095/jquery-fullcalendar-send-custom-parameter-and-refresh-calendar-with-json#comment12481283_9801095 – user711189 Mar 21 '12 at 14:43

score 0 · Answer 2 · answered Nov 06 '11 at 12:21

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

Calendar Display Issue

2 Answers2