Как сделать так, чтобы событие полного календаря при падении попадало в этот слот этой даты

Question

Привет! Можете ли вы помочь мне, пожалуйста, возможно ли при отбрасывании события, если событие имеет заголовок: event1 и start_at: 10/10/2018, когда я добавляю это событие в календарь, событие автоматически сбрасывается в этот интервал даты, дажехотя я просто уронил его куда-нибудь, можно ли как-нибудь потянуть в этот слот с датой 10/10/2018 ..?Вот пример перетаскивания полного календаря

https://codepen.io/subodhghulaxe/pen/qEXLLr?editors=0010

Answer 1

На самом деле это возможно, если добавить собственную логику в виде @ADyson, упомянутого выше в комментариях.

HTML

Ну, я добавил id и date как атрибут для внешних событий примерно так:

<div class='fc-event' id='1' date='2018-10-13'>My Event 1</div>
<div class='fc-event' id='2' date='2018-10-09'>My Event 2</div>
<div class='fc-event' id='3' date='2018-10-14'>My Event 3</div>
<div class='fc-event' id='4' date='2018-10-04'>My Event 4</div>
<div class='fc-event' id='5' date='2018-10-27'>My Event 5</div>

jQuery

затем id: $(this).attr('id') для каждого внешнего события

$(this).data('event', {
    id: $(this).attr('id'),
    title: $.trim($(this).text()), // use the element's text as the event title
    stick: true // maintain when user navigates (see docs on the renderEvent method)
});

и, наконец, я создаю новое событие на основе определенной даты и удаляю событие перед ним, используя $(this).attr('id'), как вы можете видеть ниже:

drop: function(date) {              
    var newEvent = {
        title:$(this).text(),
        start: $(this).attr('date'),
        end: $(this).attr('date'),
        allDay: false
    };

    $('#calendar').fullCalendar('removeEvents', $(this).attr('id'));              
    $('#calendar').fullCalendar('renderEvent', newEvent, true);

    // is the "remove after drop" checkbox checked?
    if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
    }
}

Это просто идея,так что теперь вы можете изменить его в соответствии с вашими потребностями.Вы также можете использовать ту же логику для внутренних событий календаря!

---

Вернуть внешние события обратно в список, используя внешние div/button

Возможно, это не таклучший способ вернуть внешние события обратно в список из календаря, но я делаю здесь, нажимая на внешний div #back-to-list, извлекая все события из памяти FullCalendar и создавая div с именем eventDiv , затем добавляем его в $('#external-events-listing'), а также добавляем draggable к событиям.Затем, удалив все события из календаря.

$('#back-to-list').click(function() {
    $('#calendar').fullCalendar('clientEvents', function(event) {        
        var eventDiv = document.createElement('div');
        eventDiv.setAttribute("class", "fc-event");
        eventDiv.setAttribute("id", event.id);
        eventDiv.setAttribute("date", event.start.format('YYYY-MM-DD'));
        eventDiv.innerText = event.title;

        $('#external-events-listing').append(eventDiv);

        $(eventDiv).draggable({
            zIndex: 999,
            revert: true,
            revertDuration: 0
        });
    });

    $('#calendar').fullCalendar('removeEvents');
});

Если внешнее событие имеет editable: false, перетаскивание невозможно в календаре.

---

Отменить последнее событиев список

Установить tempArray глобально, при добавлении нового события при перетаскивании добавить событие в tempArray, при #undo-last-item нажмите, чтобы получить сведения о событии из tempArray и добавить последний элемент кперетаскиваемый список событий.

$('#undo-last-item').click(function() {
    if (Object.entries(tempArray).length > 0) {
        var eventDiv = document.createElement('div');
        eventDiv.setAttribute("class", "fc-event");
        eventDiv.setAttribute("id", tempArray.id);
        eventDiv.setAttribute("date", tempArray.start);
        eventDiv.innerText = tempArray.title;

        $('#external-events-listing').append(eventDiv);

        $(eventDiv).draggable({
            zIndex: 999,
            revert: true,
            revertDuration: 0
        });

        $('#calendar').fullCalendar('removeEvents', tempArray.id);

        tempArray = [];
    }
});

Полный код: Перетащите внешнее событие к определенной дате календаря