javascript Fullcalendar：如何删除事件

Fullcalendar: How to remove event

提问by RobG

Thanks to another post here on StackOverflow, I added some code to my select: method that prevents users from adding an event on a date prior to NOW.

感谢 StackOverflow 上的另一篇文章，我在 select: 方法中添加了一些代码，以防止用户在 NOW 之前的日期添加事件。

The downside is that when they click on the empty time slot, and the system then complains (an alert message), the attempted event remains. How do I get rid of it? Thanks!

不利的一面是，当他们点击空的时间段，然后系统抱怨（警告消息）时，尝试的事件仍然存在。我该如何摆脱它？谢谢！

Update: Here's my code:

更新：这是我的代码：

    select: function(start, end, jsEvent) {

        var check = start._d.toJSON().slice(0,10),
            today = new Date().toJSON().slice(0,10),
            m = moment(),
            url = "[redacted]",
            result = {};
            title = "Class",
            eventData = {
                title: title,
                start: start,
                end: start.clone().add(2, 'hour'),
                durationEditable: false,
                instructorid: 123,
                locationid: 234
            };


        if(check < today) {
            alert("Cannot create an event before today.");

            $("#calendar").fullCalendar('removeEvents', function(eventObject) {
                return true;
            });

        } else {

            $.ajax({ type: "post", url: url, data: JSON.stringify(eventData), dataType: 'JSON', contentType: "application/json", success: function(result) {

                if ( result.SUCCESS == true ) {
                    $('#calendar').fullCalendar('renderEvent', eventData, true);
                    $('#calendar').fullCalendar('unselect');

                } else {

                    alert(result.MESSAGE);
                }

            }});
        }
    }

回答by leroydev

If you're using FullCalendar V2, you need to use the removeEvents method.

如果您使用的是 FullCalendar V2，则需要使用removeEvents 方法。

You can use it to delete events with a certain ID by calling it in this way:

您可以通过以下方式调用它来删除具有特定 ID 的事件：

$("#calendar").fullCalendar('removeEvents', 123); //replace 123 with reference to a real ID

If you want to use your own function that decides whether or not an event get's removed, you can call it this way:

如果您想使用自己的函数来决定是否删除事件，可以这样调用：

$("#calendar").fullCalendar('removeEvents', function(eventObject) {
    //return true if the event 'eventObject' needs to be removed, return false if it doesn't
});

回答by Ross The Boss

FullCalendar has a removeEventmethod that uses an idwhen you create the event.

FullCalendar 有一个removeEvent方法，它id在您创建事件时使用。

Example Full Calendar v1:

完整日历 v1 示例：

var calendar = $('#calendar').fullCalendar({ ... stuff ... });
    calendar.fullCalendar( 'addEventSource', {id:123, stuff:'stuff'});
    // ... other calendar things here...
    calendar.fullCalendar( 'removeEvent', 123);

Reference API v1

参考 API v1

Example FullCalendar v2:

示例 FullCalendar v2：

var calendar = $('#calendar').fullCalendar({ ... stuff ... });
    calendar.fullCalendar( 'addEventSource', {id:123, stuff:'stuff'});
    // ... other calendar things here...
    calendar.fullCalendar( 'removeEvents', [123]);

Reference API v2

参考 API v2

回答by Kamlesh

Full calendar version 4

完整日历版本 4

How to remove event from calendar:

如何从日历中删除事件：

<div id="calendar"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
      events: [
        {
          id: '505',
          title: 'My Event',
          start: '2010-01-01',
          url: 'http://google.com/'
        }
        // other events here
      ],
      eventClick: function(info) {
        info.jsEvent.preventDefault(); // don't let the browser navigate

        if (info.event.id) {
            var event = calendar.getEventById(info.event.id);
            event.remove();
        }
      }
    });
});
</script>

This worked for me. I hope, this will also help you. Thanks for asking this question.

这对我有用。我希望，这也能帮助你。感谢您提出这个问题。

回答by mumbasa

Version 4.3

版本 4.3

        calendar = new Calendar(calendarEl, {
                plugins : [ 'interaction', 'dayGrid', 'list' ],
                header : {
                    left : 'prev,next today',
                    center : 'title',
                    right : 'dayGridMonth,timeGridWeek,timeGridDay,list'
                },
                editable : true,
                droppable : true, 
                eventReceive : function(info) {
                    alert(info.event.title);

                },
                eventDrop : function(info) {
                    alert(info.event.title + " was dropped on "
                            + info.event.start.toISOString());

                    if (!confirm("Are you sure about this change?")) {
                        info.revert();
                    }
                },
                eventClick : function(info) {
                     //delete event from calender
                    info.event.remove();

                }

            });

            calendar.render();
        });