如何使完整日历的事件在下降时转到该日期的那个插槽

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 = [];
}
});

完整代码：将外部事件拖到日历的特定日期