Full calendar Removes multiple events

Question

I have the full calendar version 4 running with a database connection. Everything works as expected. I have the scheduler license so I can use the resource functions.

Now I have got a problem when I clicked a event a model pops up. than I close that model and open a other event and perform a action on that model. This action is executed for both events. It looks like the event.id is remembered from the last event. Hope some one has a idea how I can fix this issue. it is not very useful when I wanted to delete one events and it deletes multiple events :-)

This is my event click function:

eventClick: function (info) {
  var id = info.event.id;
  var koppeling = info.event.extendedProps.klant_koppeling;
  $("#bekijkAfspraak").on("click", "#bekijk_koppel", function (e) {
    if ($(this).is(":checked")) {
      console.log("Klant koppeling: aan");
      koppeling = 1;
    } else {
      console.log("Klant koppeling: Uit");
      koppeling = 0;
    }
  });
  //save changed event information
  $("#bekijkAfspraak").on("click", "#show_save", function (e) {
    var plaatsnaam = $("input#bekijk_plaatsnaam").val();
    var opmerking = $("input#bekijk_opmerking").val();
    var klantnaam = $("input#bekijk_klantnaam").val();
    var aantal_8 = $("input#bekijk_aantal8").val();
    var aantal_14 = $("input#bekijk_aantal14").val();
    var actie = $("#bekijk_actie_dropdown").val();
    var inladen = $("#bekijk_laad_keuze").val();
    var id = info.event.id;

    $.ajax({
      type: "POST",
      url: "php/update_info.php",
      data:
        "&klantnaam=" +
        klantnaam +
        "&opmerking=" +
        opmerking +
        "&id=" +
        id +
        "&plaatsnaam=" +
        plaatsnaam +
        "&aantal_8=" +
        aantal_8 +
        "&aantal_14=" +
        aantal_14 +
        "&koppeling=" +
        koppeling +
        "&actie=" +
        actie +
        "&inladen=" +
        inladen,
      success: function (response) {
        console.log("Geupdate");

        Push.create("Afpsraak Geupdate", {
          body:
            "De afspraak van: " +
            plaatsnaam +
            " is geupdate Voor klant: " +
            klantnaam,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 4000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
      },
    });
  });

  //check cancel clicked on add Modal
  $("#afsrpaakAdd").on("click", "#add_cancel", function (e) {
    info.event.remove();
  });

  $("#bekijk_betaald_status").hide();
  //set the values and open the modal
  $("#bekijkAfspraak").modal("show");

  $("#startTime").html(
    info.event.start.toISOString().slice(0, 19).replace("T", " ")
  );
  if (info.event.end == null) {
    $("#endTime").html(
      info.event.start.toISOString().slice(0, 19).replace("T", " ")
    );
  } else {
    $("#endTime").html(
      info.event.end.toISOString().slice(0, 19).replace("T", " ")
    );
  }
  //Voeg afspraak informatie toe
  $("input#bekijk_plaatsnaam").val(info.event.title);
  // $("input#bekijk_actie").val(info.event.extendedProps.actie);
  $("#bekijk_laad_keuze").val(info.event.extendedProps.inladen);
  $("#bekijk_actie_dropdown").val(info.event.extendedProps.actie);
  $("input#bekijk_opmerking").val(info.event.extendedProps.description);
  $("input#bekijk_klantnaam").val(info.event.extendedProps.klantnaam);
  $("input#bekijk_aantal8").val(info.event.extendedProps.aantal_8);
  $("input#bekijk_aantal14").val(info.event.extendedProps.aantal_14);

  var klant_id = info.event.extendedProps.klant_id;

  //Delete
  $("#bekijkAfspraak").on("click", "#delete", function (e) {
    var id = info.event.id;
    $.ajax({
      type: "POST",
      url: "/planner/delete.php",
      data: "id=" + id,
      success: function (response) {
        console.log("Afspraak:", info.event.title + " Is Verwijderd");
        $("#bekijkAfspraak").modal("hide");
        // planning.refetchEvents();
        // info.event.remove();
        location.reload();
      },
    });
  });

  //maak vervoerslijst aan
  $("#bekijkAfspraak").on("click", "#vervoerslijst", function (e) {
    var id = info.event.id;
    var klantnaam = info.event.extendedProps.klantnaam;
    //System id of customer
    var klant_id = info.event.extendedProps.klant_id;
    var actie = info.event.extendedProps.actie;
    console.log("actie", actie);
    $.ajax({
      type: "POST",
      url: "/objects/functions/pdf/examples/example_mobox.php",
      data:
        "&klantnaam=" +
        klantnaam +
        "&actie=" +
        actie +
        "&id=" +
        id +
        "&klant_id=" +
        klant_id,
      success: function (response) {
        console.log("Voervoerslijst aangemaakt voor klant", klantnaam);
        var ifr = document.getElementById("iFramePdf");
        if (actie === "LB") {
          printJS("/admin/vervoer/leeg/" + klantnaam + ".pdf");
        }
        if (actie === "LH") {
          printJS("/admin/vervoer/leeg/" + klantnaam + ".pdf");
        }
        if (actie === "VB") {
          printJS("/admin/vervoer/vol/" + klantnaam + ".pdf");
        }
        if (actie === "VH") {
          printJS("/admin/vervoer/vol/" + klantnaam + ".pdf");
        }
        if (actie === "BZ") {
          printJS("/admin/vervoer/buiten/" + klantnaam + ".pdf");
        }
        Push.create("Veroerslijst aangemaakt", {
          body:
            "Voervoerslijst is juist aangemaakt voor " +
            klantnaam +
            "Type actie " +
            actie,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 2000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
      },
    });
  });

  //verstuur bevesting naar klant
  $("#modalBevestig").on("click", "#verstuur", function (e) {
    var id = info.event.id;
    var start = info.event.start
      .toISOString()
      .slice(0, 19)
      .replace("T", " ");
    if (info.event.end == null) {
      var end = info.event.start
        .toISOString()
        .slice(0, 19)
        .replace("T", " ");
    } else {
      var end = info.event.end.toISOString().slice(0, 19).replace("T", " ");
    }
    var klantnaam = info.event.extendedProps.klantnaam;
    //System id of customer
    var klant_id = info.event.extendedProps.klant_id;
    var actie = info.event.extendedProps.actie;
    $.ajax({
      type: "POST",
      url: "verzendafspraak.php",
      data:
        "id=" +
        id +
        "&start=" +
        start +
        "&end=" +
        end +
        "&klantnaam=" +
        "&klant_id=" +
        klant_id +
        "&actie=" +
        actie,
      success: function (response) {
        console.log("Afpsraak  verstuurd naar klant", klantnaam);

        Push.create("Bevestiging gestuurd", {
          body: "De bevestiging is juist verstuurd naar " + klantnaam,
          icon: "../assets/afbeeldingen/logo.png",
          timeout: 2000,
          onClick: function () {
            window.focus();
            this.close();
          },
        });
        $("#modalBevestig").modal("hide");
        planning.refetchEvents();
      },
    });
  });

  if (info.event.extendedProps.klant_koppeling == 1) {
    $("input#bekijk_koppel").prop("checked", true);
    $("#bekijk_klant_gegvens").show(1000);
    $.ajax({
      type: "POST",
      url: "/planner/klantController.php",
      data: "klant_id=" + klant_id,
      dataType: "json",
      success: function (response) {
        var klantnaam = response.klantnaam;
        var telefoon = response.telefoon;
        $("input#bekijk_klantnaam").val(klantnaam);
        $("input#bekijk_Telefoon").val(telefoon);
        //check actie en voeg juiste adres toe
        if (
          info.event.extendedProps.actie === "VB" ||
          info.event.extendedProps.actie === "LH"
        ) {
          $("input#bekijk_adres").val(response.adres2);
          $("input#bekijk_inladen").val(response.laden_na);
        } else if (
          info.event.extendedProps.actie === "LB" ||
          info.event.extendedProps.actie === "VH"
        ) {
          $("input#bekijk_adres").val(response.adres1);
          $("input#bekijk_inladen").val(response.inladen);
        }
        if (response.locatie2 == null) {
          $("input#bekijk_boxLocatie").val(response.locatie);
        } else {
          $("input#bekijk_boxLocatie").val(
            response.locatie + " " + response.locatie2
          );
        }
        //einde van actie checken

        var boxnmrs = response.box1;
        var box = [
          response.box1,
          response.box2,
          response.box4,
          response.box4,
          response.box5,
          response.box6,
          response.box7,
          response.box8,
          response.box9,
          response.box10,
        ];
        for (var i = 1; i <= 10; i++) {
          if (box[i] == null) {
          } else {
            boxnmrs += " " + box[i];
          }
        }
        $("input#bekijk_boxNummers").val(boxnmrs);
      },
    });
    //end of ajax Klant koppeling
  } else {
    //Laat geen klant gegevens zien en zet checkbox op false
    $("input#bekijk_koppel").prop("checked", false);
    $("#bekijk_klant_gegvens").hide();
  }
  $("input#bekijk_koppel").on("change", function () {
    if ($(this).is(":checked")) {
      $("#bekijk_betaald_status").hide();
      $("#bekijk_klant_gegvens").show(1000);
      $.ajax({
        type: "POST",
        url: "/planner/klantController.php",
        data: "klant_id=" + klant_id,
        dataType: "json",
        success: function (response) {
          var klantnaam = response.klantnaam;
          var telefoon = response.telefoon;
          $("input#bekijk_klantnaam").val(klantnaam);
          $("input#bekijk_Telefoon").val(telefoon);
          //check actie en voeg juiste adres toe
          if (
            info.event.extendedProps.actie === "VB" ||
            info.event.extendedProps.actie === "LH"
          ) {
            $("input#bekijk_adres").val(response.adres2);
            $("input#bekijk_inladen").val(response.laden_na);
          } else if (
            info.event.extendedProps.actie === "LB" ||
            info.event.extendedProps.actie === "VH"
          ) {
            $("input#bekijk_adres").val(response.adres1);
            $("input#bekijk_inladen").val(response.inladen);
          }
          if (response.locatie2 == null) {
            $("input#bekijk_boxLocatie").val(response.locatie);
          } else {
            $("input#bekijk_boxLocatie").val(
              response.locatie + " " + response.locatie2
            );
          }
          //einde van actie checken

          var boxnmrs = response.box1;
          var box = [
            response.box1,
            response.box2,
            response.box4,
            response.box4,
            response.box5,
            response.box6,
            response.box7,
            response.box8,
            response.box9,
            response.box10,
          ];
          for (var i = 1; i <= 10; i++) {
            if (box[i] == null) {
            } else {
              boxnmrs += " " + box[i];
            }
          }
          $("input#bekijk_boxNummers").val(boxnmrs);
        },
      });
      //end of ajax Klant koppeling
    } else {
      $("#bekijk_betaald_status").hide();
      $("#bekijk_klant_gegvens").hide(1000);
    }
  });
  //kijk of betaald is
  $("#check_paid").click(function () {
    //$(this).hide(1000);
    $("#bekijk_betaald_status").hide();
    $.ajax({
      type: "POST",
      url: "/planner/klantController.php",
      data: "klant_id=" + klant_id,
      dataType: "json",
      success: function (response) {
        console.log("verkrijg klant informatie..");
        var betaald = response.betaald;

        if (betaald === "ja") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("betaald");
        } else if (betaald === "nee") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("Niet betaald");
        } else if (betaald === "nieuw") {
          $("#bekijk_betaald_status").show(100);
          $("#bekijk_betaald_status").html(betaald);
          console.log("Nieuwe klant");
        }
      },
    });
  });
},

Answer 1

It's because every time eventClick runs, you run $("#bekijkAfspraak").on... which creates an event handler for your buttons. But adding an event handler does not automatically remove previous event handlers! An element can have many event handlers attached to it, all handling the same event. Therefore, next time you click the button, all the event handlers attached to that button will run. That's why it adds your previous calendar events again each time.

You need to use .off() to remove previous event handlers on those buttons before adding a new one.

e.g. writing

$("#bekijkAfspraak").off("click", "#show_save")

just before the related .on() command would remove the click handler from the "show_save" button.

Repeat the same pattern for all the others within the eventClick callback.