How do I edit an event in fullCalendar?

Question

I have this sample:

link

CODE HTML:

<div id='calendar'></div>
    <div class="cont" style="display:none">
    <button type="button" class="btn btn-primary btn-save" id="edit">Save</button>
​​    <input id="required-input" type="text" name="firstname" id="firstname" placeholder="John">

CODE 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) {
                $(".cont").show();
                $( "#edit" ).click(function(e) {
                     e.preventDefault();
                     alert(event._id);
                     event.title = $("#required-input").val();
                     $('#calendar').fullCalendar('updateEvent', event);
                     $(".cont").hide();
                });

        //  event.title = "CLICKED!";


    },
    select: function(start, end, allDay)  
            {

                    var title = "test"
                    if(title)
                    {
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    //allDay: allDay
                                },

                        true // make the event "stick"
                        );
                    }   


                calendar.fullCalendar('unselect');  
            },

     events: [
        {

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

    ]        

  });

});

Unfortunately at this time to edit all events, I just want the current event.

The reason this happens? Because button click?

I put an alert and run twice, you can test the link above and see more clearly.

Thanks in advance!

Answer 1

you are getting a memory leak, by binding the edit click event everytime you click on an event

   $( "#edit" ).off('click').on('click', function(e) {
     ...
   )}

will solve it, by unbinding and rebinding every time

Answer 2

The problem is every time you click on an event a new click handler is getting added to the button, one possible solution is to use .off() to remove the current handler and add a new handler.

Another is to can use .data() api to pass the event instance to the click handler

$(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) {
      $(".cont").show().data('event', event);
    },
    select: function(start, end, allDay) {

      var title = "test"
      if (title) {
        calendar.fullCalendar('renderEvent', {
            title: title,
            start: start,
            end: end,
            //allDay: allDay
          },

          true // make the event "stick"
        );
      }


      calendar.fullCalendar('unselect');
    },

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

    ]
  });
  $("#edit").click(function(e) {
    e.preventDefault();

    var title = $("#required-input").val().trim();
    if (!title) {
      return;
    }
    var event = $(".cont").data('event'),
      isAdd = !event;
    if (isAdd) {
      event = {};
      event.start = '2014-11-12';
    }
    event.title = title;
    if (isAdd) {
      $('#calendar').fullCalendar('renderEvent', event, true);
    } else {
      $('#calendar').fullCalendar('updateEvent', event);
    }
    $(".cont").hide().removeData('event');
  });

  $("#add").click(function(e) {
    $(".cont").show();
  });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js" ie.="" data-type=""></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.js "></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">


<div id='calendar'></div>
<div class="cont" style="display:none">
  <button type="button" class="btn btn-primary btn-save" id="edit">Save</button>
  <input id="required-input" type="text" name="firstname" id="firstname" placeholder="John" />
</div>

<button type="button" class="btn btn-primary btn-save" id="add">Add</button>