在 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 如果是的话，将根据确认弹出窗口触发对网络服务的 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:

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

An elegant way to install a trash can to delete full calendar events in Smart Admin Theme?

javascript

fullcalendar

smartadmin