Question

我想删除fullcalendar jquery插件上的事件，方法是将它们拖到垃圾桶图像中并放入其中。有几个帖子讨论这个动作，但我似乎无法让我的工作。垃圾桶图像在下面的cshtml中定义：

<div class="well well-sm" id="deleteEventsDiv" style="text-align:center">
    <label id="delete_events_lbl" style="display:block; text-align:center; font-size:medium; font-weight:bold">Delete Events</label>

    <img src="~/Images/cal-trash.png">
    <div class="note">
        <strong>Note:</strong> Drag and drop events here to delete them
    </div>
</div>

我可以将事件拖到垃圾箱，但它会恢复到原来的位置，然后触发eventDragStop事件。由于它不在垃圾桶上，因此其余代码不会运行。这是我的全日历代码：

$('#edit_calendar').fullCalendar({
header:
{
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
selectable: true,
selectHelper: true,
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {      
    var memberName = $(this).data('event').title;
    var memberID = $(this).attr('id').toString();
    //Create Event - add to array
    var newEvent = new Object();
    newEvent = {
        title: memberName,
        id: memberID,
        start: date.format(),
        end: date.format(),
        objectID: 0
    };  
    eventsAdded.push(newEvent);
},
editable: true,
//The following constraints prevents the user from adding/updating/deleting events that are before the current date
//The end date is required.  So, you can't add events over a year away from the current date
eventConstraint: {
    start: moment().startOf('day'),
    end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
selectConstraint: {
    start: moment().startOf('day'),
    end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
resizable: true,
dragRevertDuration: 0,
eventDragStop: function (event, jsEvent, ui, view) {
    alert('event drag stopped...should be over trash can.');
    // This condition makes it easier to test if the event is over the trash can using Jquery
    if ($('div#deleteEventsDiv').is(':hover')) {
        // Confirmation popup
        $.SmartMessageBox({
            title: "Delete Event?",
            content: 'Are you sure you want to remove this event from the calender?',
            buttons: '[No][Yes]'
        }, function (ButtonPressed) {
            if (ButtonPressed === "Yes") {

                // You can change the URL and other details to your liking.
                // On success a small box notification will fire
                $.ajax({
                    url: '/events/' + event.id,
                    type: 'DELETE',
                    success: function (request) {
                        $.smallBox({
                            title: "Deleting Event",
                            content: "Event Deleted",
                            color: "#659265",
                            iconSmall: "fa fa-check fa-2x fadeInRight animated",
                            timeout: 4000
                        });
                        $('#edit_calendar').fullCalendar('removeEvents', event.id);
                    }
                });
            }
        });
    }
}
}); //end calendar initialization

如果事件在垃圾桶上方时没有返回原来的位置，我怎么办？

Answer 1

我在这里遇到了同样的问题。我发现了一个古老的解决方案。

我希望它也适合你。

打开fullcalendar.js并编辑：

dragRevertDuration: 500

到

dragRevertDuration: 0

事件返回原始位置

1 个答案: