Javascript Fullcalendar update event based on form input value

I'd like to update an event in fullcalendar when the user changes the value of a select input in a Spring form. I implemented the onChange function of the select and it gets called as expected. The problem is that when I try to add/delete/modify any events in the calendar nothing happens. This function is called during document initialization as well and it works fine. Could you help me solve why the calendar is not reacting to any calls (done according the documentation)?

Sources (with all the comments I tried so far:

The form:

<form:input id="fromDate" class="form-control" path="fromDate" onchange="updateEditedEventTimeInOrganizer()"/>
        <form:select path="fromTime" class="form-control" onchange="updateEditedEventTimeInOrganizer()">
            <form:options items="${timeSlots}" />
        </form:select>

The js file:

$(document).ready(function() {
calendarInit();

updateOrianizerCalendarEvents();
});

function calendarInit() {
calendar = $('#organizerCalendar').fullCalendar({
    /*
     * header option will define our calendar header left define what will
     * be at left position in calendar center define what will be at center
     * position in calendar right define what will be at right position in
     * calendar
     */
    viewDisplay : function(view) {
        if (lastView != view.name) { // view has been changed, tweak
                                        // settings
            updateOrianizerCalendarEvents();
        }
        lastView = view.name;
    },
    header : {
        left : 'prev,next today',
        center : 'title',
        right : 'agendaWeek,agendaDay'
    },
    /*
     * defaultView option used to define which view to show by default, for
     * example we have used agendaWeek.
     */
    defaultView : 'agendaWeek',
    // minTime: 0,
    // maxTime: 12,
    timeFormat : 'HH:mm:ss',
    // ignoreTimezone: false,

    eventColor : 'green',
    unselectAuto : false,
    firstDay : 1
});

$(".fc-next-button").click(function() {
    updateOrianizerCalendarEvents();
});
$(".fc-prev-button").click(function() {
    updateOrianizerCalendarEvents();
});
}

function updateOrianizerCalendarEvents() 
{
$("#organizerCalendar").fullCalendar('removeEvents');

console.log("updateOrianizerCalendarEvents" + "?" + csrfName + "=" + csrfToken);

invitees = $( "input[id^='inviteeInput']" );

var view = $("#organizerCalendar").fullCalendar('getView');
var start = view.start;
var end = view.end;

var startDate = new Date(start.toString());
var endDate = new Date(end.toString());

var usernames = new Array();
for ( var j = 0; j < invitees.length; j++) {
    usernames[j] = invitees[j].value;
}

console.log("Getting events for users:");
console.log(usernames);

$.ajax({
    url : "/calendar/getEventsForUsers" + "?" + csrfName + "=" + csrfToken,
    type : "POST",
    data : {
        usernames : usernames,
        start : startDate.getTime(),
        end : endDate.getTime()
        },
    success : function(data, textStatus, jqXHR) {
        var clientEvents = $("#organizerCalendar").fullCalendar('clientEvents');
        console.log(data);
        events = JSON.parse(data);
        $("#organizerCalendar").fullCalendar('addEventSource', events);
        for ( var event in events) {
            event.editable = false;
        }
        console.log();

    },
    error : function(jqXHR, textStatus, errorThrown) {
        handleError(jqXHR, textStatus, errorThrown);
    }
});

//The selected time interval
updateEditedEventTimeInOrganizer();
}

function updateEditedEventTimeInOrganizer() {
console.log("Creating event marker in organizer"); 

var eventArray = calendar.fullCalendar('clientEvents', -1);
//  $("#organizerCalendar").fullCalendar( 'removeEvent', eventArray[0] );
//  calendar.fullCalendar( 'removeEvent', '-1');
calendar.fullCalendar('removeEventSource', eventArray);
var events = calendar.fullCalendar('clientEvents', "-1");

var fromDate = $("#fromDate").val();
var fromTime = $("#fromTime").val();

var toDate = $("#toDate").val();
var toTime = $("#toTime").val();

console.log("From: " + fromDate + " " + fromTime);
console.log("To: " + toDate + " " + toTime);

//Dates get offset by client's time zone, though they shouldn't be -> need to be incremented
var timeZoneOffset = new Date().getTimezoneOffset();
console.log("Timezone offset in minutes is : " + timeZoneOffset);
calendar;
var timeZoneOffsetMillis = timeZoneOffset * 60 * 1000;

//  if(eventArray == null || eventArray.length == 0) {
    var event = {
            id : -1,
            title : 'Selected date',
            start : Date.parse(fromDate + " " + fromTime) - timeZoneOffsetMillis,
            end : Date.parse(toDate + " " + toTime) - timeZoneOffsetMillis,
            editable : true,
            color : 'orange'
    }
    calendar.fullCalendar( 'renderEvent', event );
    $("#calendar").fullCalendar('addEventSource', eventArray);
//  } else { //TODO
//      var event = eventArray[0];
//      var moment=moment(Date.parse(fromDate + " " + fromTime) - timeZoneOffsetMillis);
//      event.start(moment);
//      event.end = Date.parse(toDate + " " + toTime) - timeZoneOffsetMillis;
//      $("#organizerCalendar").fullCalendar( 'updateEvent', event );
//  }
}