Элегантный способ установить корзину для удаления полных событий календаря в теме Smart Admin?

Я работаю с темой Smart Admin и мне нужен способ установить корзину на страницу календаря, чтобы я мог позволить пользователям легко перетаскивать события, чтобы удалить их.

Я прошел через Удалить элементы из fullcalendar (путем перетаскивания в корзину ) и хотя я ценю ответ eXistPierre и несколько других, они определенно хорошо написаны, но у меня все еще было несколько проблем, с которыми я столкнулся. Им почти 2 года и они, вероятно, для более старой версии полного календаря. Более того, поскольку я не являюсь опытным разработчиком Javascript и все еще учусь, я не мог понять код.

Я отвечаю за способ установки мусорной корзины, который вдохновлен eXistPierre, но соответствует более новой версии и намного проще, по крайней мере, на мой взгляд. Я надеюсь, что это поможет всем, кто работает с темой Smart Admin, кто также может захотеть установить корзину для удаления событий из календаря.


javascript fullcalendar smartadmin
person Rohan    schedule 03.07.2015    source источник
comment
Можете ли вы опубликовать код, чтобы показать, что вы пробовали?   -  person Jordan Davis    schedule 03.07.2015

Ответы (1)


arrow_upward
4
arrow_downward

Во-первых, события нельзя перетаскивать за пределы календаря. Чтобы включить это:

.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 к веб-службе будет срабатывать в зависимости от всплывающего окна подтверждения, которое также является частью темы Smart Admin.

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:

Скриншот

person Rohan    schedule 03.07.2015