Dan Brisson Dan Brisson - 1 year ago 78
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 class="modal-footer">
<button class="alert alert-success" id="btnSave"><a target="_blank">Save</a></button>

<div id="calendar"></div>
<div style='clear:both'></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
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag

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) {
$("#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
loading: function(bool) {
/*end of section separate windows */


I dont understand why, can you help me please?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download