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

【问题标题】：Fullcalendar: Delete event on button click in dayGrid viewFullcalendar：在 dayGrid 视图中单击按钮时删除事件
【发布时间】：2020-01-13 23:10:34
【问题描述】：

我正在尝试删除按钮点击事件：

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

【问题讨论】：

你能用你的例子创建一个简单的小提琴吗？
我在 laravel 中使用 fullcalendar，所以我不知道是否可以为它创建小提琴。
看jsfiddle.net/tpde8Luw/1按钮只删除选中的事件
好吧，首先你应该确保你只使用与版本 4 相关的代码示例和文档，否则你会一直卡住。版本 3 非常不同，如果不进行更改，大多数代码将无法在版本 4 中运行。
您可以在下面添加答案。然后它可以帮助其他有类似问题的人，我们其他人可以对其进行投票（这将为您获得声誉积分）:-)

标签： javascript fullcalendar fullcalendar-4

【解决方案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();
        });

【讨论】：