javascript - Fullcalendar:删除 dayGrid View 中单击按钮的事件

Question

我正在尝试使用以下方法删除按钮单击事件:

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

但它会删除日历中的所有事件，而不是单击的事件。我尝试过提供的其他解决方案，但它们要么具有列表项 View ，要么具有日议程 View (v4 中的 timeGrid)，而我仅使用月 View (dayGrid)。我的fullcalendar的js如下:

    <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>

注意:我也尝试过使用这样的对话框:

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?
                             }
                           }
             });
       },

但点击后会出现“typeerror $(...).dialog is not a function”。

Answer 1

解决方案:首先我更正了我的代码，我使用的是 fullCalendar v4 库，而我使用的是 v3 函数，这会产生冲突。然后我在html中使用bootsrap modal并在JS中调用它。最后我使用Ajax调用删除事件代码如下:

        $(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();
        });