Fullcalendar: Delete event on button click in dayGrid view

Question

I am trying to delete events on button click using:

    eventRender: function(event, element) {
            element.append( "<span class='closeon'>X</span>" );
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        },

but it deletes all events in the calendar instead of clicked event. I've tried other solutions provided but they are either with list item view or dayagenda view (timeGrid in v4) while I am using month view (dayGrid) only. My js of fullcalendar is as follows:

    <script src="{{ URL::asset('fullcalendar/packages/core/main.js') }}"></script>
    <script src="{{ URL::asset('fullcalendar/packages/interaction/main.js') }}"></script>
    <script src="{{ URL::asset('fullcalendar/packages/daygrid/main.js') }}"></script>
    <script src="{{ URL::asset('moment/moment.js') }}"></script>
    <script src="{{ URL::asset('js/jQuery.min.js') }}"></script>
    <script>
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'bootstrap' ],
        themeSystem: 'bootstrap',
         header: {
        left: false,
        center: 'title',
        },
        defaultView: 'dayGridMonth',
        validRange: {
          start: '2019-08-26',
          end: '2019-09-26',
        },   
        selectable: true,
        editable  : true,
        droppable : true,
        eventSources: [
          {
            url: '{{"roster/getEvents"}}',
            allDay: false,
            allDayMaintainDuration: false,
            textColor: 'black',

          },
          {
            url: '{{"roster/getGazette"}}',
            editable: false,
            overlap: false,
          },
        ],
      });

    calendar.render();
    });
    </script>

Note: I've also tried using dialog like this:

eventClick: function(calEvent, jsEvent, view) {

            id= calEvent.id;

            $( "#dialog" ).dialog({
                  resizable: false,
                  height:100,
                  width:500,
                  modal: true,
                  title: 'Want you want to do?',
                  buttons: {
                             CLOSE: function() {
                                 $("#dialog").dialog( "close" );
                             },
                             "DELETE": function() {
                                //do the ajax request?
                             }
                           }
             });
       },

but it gives "typeerror $(...).dialog is not a function" upon click.

Answer 1

Solution: first i corrected my code, i was using fullCalendar v4 libraries and i was using v3 functions which created conflict. Then i used bootsrap modal in html and called it in JS. At last i used Ajax call to delete events Code is as follows:

        $(document).ready(function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'bootstrap'],
        themeSystem: 'bootstrap',
         header: {
        left: false,
        center: 'title',
          },
        defaultView: 'dayGridMonth',
        validRange: {
          start: '2019-08-26',
          end: '2019-09-26',
          },   
        selectable: true,
        editable  : true,
        droppable : true,
          eventClick: function(info) {
            id = info.event.id;
            $("#myModal").modal();

            window.deleteRecord=function() {
              $.ajax({
                    headers: {
                      'X-CSRF-TOKEN': $('meta[name="edit-token"]').attr('content')
                    },
                    type: "POST",
                    url: "{{route('deleteRecord')}}",
                    data: JSON.stringify(id),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
              }).done( function(data){
                  console.log('Ajax was Successful!');
                  console.log(data); 
                  location.reload(true); 

              }).fail(function(data){
                  console.log('Ajax Failed');
              });
            }
          },
        eventSources: [
              {
                url: '{{"roster/getEvents"}}',
                allDay: false,
                allDayMaintainDuration: false,
                textColor: 'black',
              },
              {
                url: '{{"roster/getGazette"}}',
                editable: false,
                overlap: false,
              },
            ],
          });
        calendar.render();
        });