1

我正在使用智能管理主题，我想要一种在日历页面上安装垃圾桶的方法，这样我就可以让用户轻松拖放事件以删除它们。

我已经完成了从 fullcalendar 中删除元素（通过拖到垃圾桶），虽然我很欣赏 eXistPierre 的回答和其他一些人，但它们绝对写得很好，但我仍然面临一些问题。他们快 2 岁了，他们可能是完整日历的旧版本。此外，由于我不是经验丰富的 Javascript 开发人员并且仍在学习，因此我无法与代码相关联。

我正在回答一种安装垃圾桶的方法，该方法的灵感来自 eXistPierre，但符合新版本并且更简单，至少在我看来。我希望这可以帮助任何使用 Smart Admin Theme 的人，他们也可能想要安装一个垃圾桶以从日历中删除事件。

4

1 回答 1

4

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

.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：

截屏

于 2015-07-03T20:29:41.293 回答