Dan Brisson Dan Brisson - 1 month ago 13
Javascript Question

When i create a second event in full calendar, two events is create

If you create a event, it work perfectly, but when you create more, the system create all events before + the one you create right now.

<div id='wrap'>


<div id="fullCalModalModify" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<a>Title:</a><input id="modalTitleModify" class="modal-title" autofocus><a>Avec:</a><input id="modalClientModify" class="modal-title">
</div>

<div class="modal-footer">
<button class="alert alert-success" id="btnSave"><a target="_blank">Save</a></button>
</div>
</div>
</div>

<div id="calendar"></div>
<div style='clear:both'></div>
</div>




$(document).ready(function() {
var title;
var client;
var eventData;
/* initialize the external events------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});

// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: '2016-09-12',
droppable: true, // this allows things to be dropped onto the calendar
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
$('#modalTitleModify').val("");
$('#modalClientModify').val("");
$('#fullCalModalModify').modal();
$("#btnSave").click(function() {
title = $('#modalTitleModify').val();
client = $('#modalClientModify').val();
description = $('#modalDescriptionModify').val();
if (title) {
eventData = {
title: title,
clientName: client,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$("#fullCalModalModify").modal('hide');
}
});
$('#calendar').fullCalendar('unselect');
},
loading: function(bool) {
$('#loading').toggle(bool);
/*end of section separate windows */
},
});
});


http://jsfiddle.net/prodeinfo/x4dbs8qz/

I dont understand why, can you help me please?

Answer

I think the problem is that you're adding a new $("#btnSave").click() event listener every time the select function (select: function(start, end) {....}) is called.

You can fix that by using the jquery .one(...) function. Here is an example:

select: function(start, end) {
    ....
    $("#btnSave").one("click", function() { 
        ....
    }
}

It seems to be working