Full calendar eventClick is not refreshing and stacking up the clicks

Question

Whenever i try to change the title, it works fine for first time but if i try to change the title of another event without refresh, both previously changed event title and present event title gets changed.

Below you can find posted the custom JavaScript file of full calendar. But when i change the title of the event and refresh manually it works fine.

function  init_calendar() {

            if( typeof ($.fn.fullCalendar) === 'undefined'){ return; }


            var date = new Date(),
                d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear(),
                started,
                categoryClass;


            var calendar = $('#calendar').fullCalendar({
              header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listMonth'
              },
              selectable: true,
              selectHelper: true,
              eventLimit: true,


              select: function(start, end, allDay) 
                    {
                        $('#fc_create').click();

                        started = moment(start).format('YYYY/MM/DD, h:mm:ss A');
                        ended = moment(end).format('YYYY/MM/DD, h:mm:ss A');

                        $(".antosubmit").on("click", function() {
                          var title = $("#title").val();


                          categoryClass = $("#event_type").val();

                          if (title) {
                            var start = moment(start).format('YYYY/MM/DD HH:mm:ss');
                            var end = moment(end).format('YYYY/MM/DD HH:mm:ss')
                            $.ajax({
                                   url:"add.php",
                                   type:"POST",
                                   data:{title:title, start:started, end:ended},
                                   success:function()
                                   {
                                    calendar.fullCalendar('refetchEvents');
                                    alert("Added Successfully");
                                   }
                                  })
                          }

                          $('#title').val('');
                          calendar.fullCalendar('unselect');
                          $('.antoclose').click();
                          return false;
                        });
                    },

                    editable:true,
                    eventDrop:function(event)
                    {
                     var start = moment(event.start).format('YYYY/MM/DD HH:mm:ss');
                     var end = moment(event.end).format('YYYY/MM/DD HH:mm:ss');
                     var title = event.title;
                     var id = event.id;
                     $.ajax({
                      url:"event_change.php",
                      type:"POST",
                      data:{title:title, start:start, end:end, id:id},
                      success:function()
                      {
                       calendar.fullCalendar('refetchEvents');
                       alert("Event Updated");
                      }
                     });
                    },
                    editable:true,
                    eventResize:function(event)
                    {
                     var start = moment(event.start).format('YYYY/MM/DD HH:mm:ss');
                     var end = moment(event.end).format('YYYY/MM/DD HH:mm:ss');
                     var title = event.title;
                     var id = event.id;
                     $.ajax({
                      url:"event_change.php",
                      type:"POST",
                      data:{title:title, start:start, end:end, id:id},
                      success:function(){
                       calendar.fullCalendar('refetchEvents');
                       alert('Event changed');
                      }
                     })
                    },


              eventClick: function(calEvent, jsEvent, view) {
                $('#fc_edit').click();

                var id = calEvent.id;

                categoryClass = $("#event_type").val();

                $(".antoremove2").on("click", function(){

                    categoryClass = $("#event_type").val();

                    $.ajax({
                           url:"remove.php",
                           type:"POST",
                           data:{id:id},

                           success:function()
                           {
                            calendar.fullCalendar('refetchEvents');
                            alert("Event Removed");

                           }
                          })

                });


                $(".antosubmit2").on("click", function() {
                  calEvent.title = $("#title2").val();
                   var id = calEvent.id;
                    var title = calEvent.title;
                   var start = moment(calEvent.start).format('YYYY/MM/DD HH:mm:ss');
                    var end = moment(calEvent.end).format('YYYY/MM/DD HH:mm:ss');

                     console.log(title);
                     console.log(id);
                     console.log(start);
                     console.log(end);

                     $.ajax({
                      url:"event_change.php",
                      type:"POST",
                      data:{title:title,start:start, end:end, id:id},
                      success:function(){
                       calendar.fullCalendar('refetchEvents');
                       alert('Event changed');
                      }
                     });


                  calendar.fullCalendar('updateEvent', calEvent);
                  $('.antoclose2').click();


                });

                calendar.fullCalendar('unselect');
              },
              editable: true,
              events:'view.php',
            });

        };
   $(document).ready(function() {


    init_calendar();
});

it's because every time "eventClick" runs, you add a new event handler to "antosubmit2". Doing this does not remove any previously added handler code, it simply adds another version. So next time you click that "antosubmit2" button it will run _all_ the attached event handlers for that button (or buttons), so it will update the titles for all the previously selected events. You need to refactor your code so you only ever declare one event handler per button, but ensure that it can access the right data to know which event ID it's supposed to be dealing with each time it's clicked. — ADyson, Jun 05 '18 at 11:39
I think you will find the same problem with your "add" and "remove" features as well — ADyson, Jun 05 '18 at 11:40
the problem is only with remove and edit in the eventClick, Add is working fine. — Rohit Gowda, Jun 05 '18 at 11:57
Hmm are you sure, because `$(".antosubmit").on("click", function() {` will get executed many times if it happens that you make multiple selections, so in that case you'll end up adding the same events multiple times. It may not be obvious on the calendar view but you should check it in your database. I would strongly recommend refactoring this code as well as your edit and remove code. — ADyson, Jun 05 '18 at 12:33

score 0 · Answer 1 · edited Jan 03 '19 at 10:57

0

You can use the .one('event') method instead of .on('event'). Then you can manage your events one by one without changing the previously selected event.

edited Jan 03 '19 at 10:57

Tobias Wilfert

919
3
14
26

answered Jan 03 '19 at 09:32

Akwind

1

Full calendar eventClick is not refreshing and stacking up the clicks

1 Answers1