javascript - 在 Smart Admin Theme 中安装垃圾桶以删除完整日历事件的优雅方法？

Question

我正在使用 Smart Admin Theme我想要一种在日历页面上安装垃圾桶的方法，这样我就可以让用户轻松拖放事件以将其删除。

我已经经历了Remove Elements from fullcalendar (by dragging to trash can)尽管我很欣赏 eXistPierre 和其他一些人的回答，但它们绝对写得很好，但我仍然遇到了一些问题。他们快 2 岁了，他们可能是旧版本的完整日历。此外，由于我不是经验丰富的 Javascript 开发人员并且仍在学习，因此我无法理解代码。

我正在回答一种安装垃圾桶的方法，它受到 eXistPierre 的启发，但符合较新的版本并且更简单，至少在我看来是这样。我希望这对使用 Smart Admin Theme 的其他人有所帮助，他们可能也想安装垃圾桶以从日历中删除事件。

Answer 1

首先，不能将事件拖到日历之外。要启用它:

.fc-view
{
    width: 100%;
    overflow: visible;
}

这将允许用户将事件拖到日历之外。

其次，我在日历的左侧安装了一个带垃圾桶的小 div，可以使用以下代码在其中创建新事件:

<div class="well well-sm" id="deleteEventsDiv">
    <legend>
        Delete Events
    </legend>
    <img src="/img/avatars/cal-trash.png">
    <div class="note">
        <strong>Note:</strong> Drag and drop events here to delete them
    </div>
</div>

这是在拖动事件停止时监听的 eventDragStop 方法。我使用了简单的 Jquery 来检查掉落是否越过垃圾桶 div，如果是，对 Web 服务的 ajax 调用将根据确认弹出窗口触发，这也是智能管理主题的一部分。

eventDragStop: function( event, jsEvent, ui, view, removeEvents ) {
    // 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
                        });
                        $('#calendar').fullCalendar('removeEvents', event.id);
                    }
                });
            }
        });
    }
},

就是这样。你可以开始了。此答案和 div 的屏幕截图中还包含垃圾图像。

垃圾桶PNG:

垃圾桶div截图: