2

I have a problem with JavaScript FullCalendar.

When I click on a day, a modal opens, where the user has to choose a name. This name is added to the selected day.

When I add the second event (so, first name), it works. When I click on another day to add a new event, the new event is well added, BUT this event is also added to the day selected for the first event.

When I add a third event, this event is added where expected, but also added to the days I had previously added events.

When the page is refreshed, the problem disappears for the first event, and after, start again, as explained. Here is my code:

$(document).ready(function() {

   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today titre',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events: 'load.php',
    selectable:true,
    selectHelper:true,
    locale: 'fr',
    showNonCurrentDates: false,
    buttonText: {
        today:    'Aujourd\'hui - Tournée 1',
        month:    'Mois',
        week:     'Semaine',
        day:      'Jour',
        list:     'Liste'
    },
    dayNamesShort: [
        'Dim','Lun','Mar','Mer','Jeu','Ven','Sam'
    ],
    monthNames:[
        'Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'
    ],
    firstDay:1,
    aspectRatio: 1.50,
    displayEventTime: false,
    select: function(start, end, allDay)
    {
        var title = '';
        var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");      
        var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");            

        $('#myModal').modal('show'); 

        $('.savebutton').click(function() {

           title = document.getElementById("name").options[document.getElementById('name').selectedIndex].text;

           if(title)
           {

               var backgroundColor = "red";

               $.ajax({
               url:"insert.php",
               type:"POST",
               data:{title:title, start:start, end:end,backgroundColor:backgroundColor},
               success:function()
               {
                   calendar.fullCalendar('refetchEvents');
                   title=''; 

                   // location.reload();
                }
                })

            }
          });

    }
Dimitris Papazacharias
  • 661
  • 1
  • 7
  • 21
Graham Christopher
  • 21
  • 2
  • 1
    `$('.savebutton').click(function() {` ... you're binding a new event handler to the button every time the "select" callback runs. But you never remove the handlers added by previous calls to "select". Therefore whenever someone clicks the button it will run the new handler, as well as all the others. Hence why, by the time you add the third event, it is also re-adding the two previous ones as well. – ADyson Feb 11 '20 at 20:30

0 Answers0