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>

但它在点击时给出“typeerror $(...).dialog is not a function”。