FullCalendar open bootstrap modal on eventClick

Question

I have a bootstrap fullcalendar, when I click on an empty day, the modal which allows to save the events is displayed well, but when I click on an event to modify it, the modal which allows to modify the event, does't display.

I have a bootstrap fullcalendar, when I click on an empty day, the modal which allows to save the events is displayed well, but when I click on an event to modify it, the modal which allows to modify the event, does't display.

I don't know where the problem comes from this is my code:

      

<div  class="modal fade" id="PrestUpt" role="dialog" class="modal fade task-modal-single in" tabindex="-1"  aria-labelledby="myLargeModalLabel" >
                <div class="modal-dialog modal-lg">
                    <div class="modal-content data">
                        <div id="jalil" ></div>
                            
                               
                    </div>
                </div>
            </div>


<script>
   
  $(document).ready(function() {
     // jQuery("#PrestUpt").modal('show');
   var calendar = $('#calendar').fullCalendar({
        locale: 'fr',
        plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
        firstDay: 1,
    editable:true,
    header:{
        left:'prev,next today',
        center:'title',
        right:'month,agendaWeek,agendaDay'
    },
    events: 'event_load_new.php',
    selectable:true,
    selectHelper:true,
select: function (start, end, allDay) {
            //do something when space selected
            //Show 'add event' modal
            // var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
            var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
            document.getElementById('start').value = start;
            $('#exampleModal').modal('show');
        },
    editable:true,
    eventResize:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"event_update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function(){
       calendar.fullCalendar('refetchEvents');
       alert("Mise à jour de l'événement");
      }
     })
    },
    
    eventClick: function(info) {
        var idpr = info.event.id;
    
        alert(idpr);
        // datepr = datepr.substr(6, 4)+ '' +datepr.substr(3, 2)+ '' +datepr.substr(0, 2);
        $.ajax({
            type : 'post',
            url : 'moadal_gool.php', //Here you will fetch records 
           data :  'idp='+idpr, //Pass $id
            success : function(data){
            $('#jalil').html(data);//Show fetched data from database
            jQuery("#PrestUpt").modal('show');
            }
        });
            
    },

    eventDrop:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"event_update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function()
      {
       calendar.fullCalendar('refetchEvents');
       alert("Événement mis à jour");
      }
     });
    },

    

   });
  });
   
  </script> 

Answer 1

This is how you do it...

eventClick: this.openModal.bind(this)

//then create a function openModal()
openModal(args:any){
    jQuery("#PrestUpt").modal("show");
    ...
}