Jquery: How can I edit event in full calendar?

Question

I wish to edit events in my popup. Further details are given following these details about my HTML and JS:

HTML

---

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
               <ul class="nav nav-tabs" id="tabContent">
                    <li class="active"><a href="#details" data-toggle="tab">Appointments</a></li>
                    <li><a href="#access-security" data-toggle="tab">Events</a></li>
                </ul>

              <div class="tab-content">
                    <div class="tab-pane active" id="details">
                        <div class="control-group">
                          <form>    
                              <label class="control-label">Event Name</label>
                              <input type="text" name="eventName"  id="eventName">
                              <label class="control-label">Date</label>
                              <input type="text" name="eventName"  id="eventName">
                              <input type="submit" value="Submit" id="submit"> 
                          </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="access-security">
                    content 0
                    </div> 
              </div>
          </div>

        </div>
    </div>

    <div id='calendar'></div>

JS

---

$(function() { // document ready

  var calendar=$('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-11-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    defaultView: 'agendaDay',
    selectable: true,   //permite sa selectezi mai multe zile
    selectHelper: true,  //coloreaza selctia ta

    eventClick:  function(event, jsEvent, view) {  //This is the editing function
        console.log(event);
        $('#myModal').modal('show');
        $("#eventName").val(event.title);
        $( "#submit" ).click(function(e) {
            e.preventDefault();
            var title = $("#eventName").val();
            if(title){
                $('#calendar').fullCalendar('updateEvent', title);
            }
        //  console.log(title);

        }); 
     // event.title = "CLICKED!";
        //$('#calendar').fullCalendar('updateEvent', event);
    },
    select: function(start, end, allDay)  
            {
                $('#myModal').modal('show');

                $( "#submit" ).click(function(e) {
                    e.preventDefault();
                    var title = $("#eventName").val();
                    if(title)
                    {
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    //allDay: allDay
                                },

                        true // make the event "stick"
                        );
                    }   
                    $('#myModal').modal('hide');
                });
                calendar.fullCalendar('unselect');  
            },

     events: [
        {

            title  : 'titleEvent',
            start  : '2014-11-12',
             allDay : false // will make the time show
        },

    ]        

  });

});

1. I want to open a pop-up in Bootstrap with an input //DONE

2. I want to add a event after I complete the name "event name" // DONE

3. On the eventClick function I want to open the same pop-up with input value (event name) already completed //DONE

4. After pressing the submit button I want to edit Event with the new value from written form //This is not done

Answer 1

Even though this question is old, I'm answering it now so that others who come across this in the future don't have to spend as long scouring the internet for a solution like I just did.

Side note: I wasn't able to get a function outside of the eventClick: to update the event so it would be much appreciated if anyone else who has gotten this to work could comment or add another answer with that solution.

Here's what I put inside my eventClick function in order to open my bootstrap modal and then update the event upon clicking the "Save" button, which in this example has a class of saveChanges that I am using as the selector.

    eventClick: function(calEvent, jsEvent, view) {
        eventToEdit = $("#calendar").fullCalendar('clientEvents', calEvent.id);
        showEditEventModal(calEvent);
        $('.saveChanges').on('click',function(e){
            e.preventDefault();
            calEvent.start = $('#eventStart').val();
            calEvent.end = $('#eventEnd').val();
            calEvent.title = $('#eventTitle').val();
            $('#calendar').fullCalendar('updateEvent', calEvent);
        });
    }

The $('#eventStart'), $('#eventEnd'), and $('#eventTitles') are selectors to get the value of the associated fields in my "Edit Event" modal that pops up upon clicking an event in the calendar.

Hope this very belated answer will save someone some time in the future!