Fullcalendar：在 dayGrid 视图中单击按钮时删除事件

Question

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

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

但它会删除日历中的所有事件而不是单击事件。我尝试了提供的其他解决方案，但它们要么带有列表项视图，要么带有日程视图（v4 中的 timeGrid），而我仅使用月视图（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();
        });

Fullcalendar：在 dayGrid 视图中单击按钮时删除事件

Fullcalendar: Delete event on button click in dayGrid view

javascript

fullcalendar

fullcalendar-4