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内存中检索所有事件并创建一个名为 eventDiv 的div，然后将其附加到$('#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 = [];
    }
});

完整代码： Drag an external event to calendar's specific date

如何使全日历活动下降到该日期的那个时段

1 个答案: