Javascript 如何使完整日历上的事件转到该日期的那个时段

你好，你能帮我吗，如果事件标题为：event1且开始时间为：

10/10/2018

则事件是否可能在事件停止时发生？当我将此事件放在日历上时，事件是否会自动停止到该日期段，即使我只是将其放在某个地方。是否可能以某种方式将其拖到日期为

10/10/2018

的时间段。。？ 下面是fullcalendar拖放的一个示例

---

实际上，这可以通过添加您自己的逻辑来实现，如上面评论中提到的@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>

最后，我将根据特定日期创建一个新事件，并使用

$（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/按钮将外部事件返回列表

也许，这不是将外部事件从日历还原回列表的最佳方法，但我在这里所做的是单击外部div
#返回列表
，从完整的日历内存中检索所有事件，并创建名为
eventDiv的
div
，然后将其附加到
$（“#外部事件列表”）
并将
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');
});

如果外部事件具有
可编辑：false
，则无法在日历中拖动

$('#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');
});


将上一个事件撤消到列表中

全局设置
tempArray
，在将事件拖动到
tempArray
时添加新事件，在
上撤消最后一项
单击从
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 = [];
    }
});

完整代码：
几天前你问了同样的问题，我已经建议停止使用拖放。如果你想在特定位置放置特定事件，那么就编写代码来执行此操作，而不是试图更改拖放操作。拖放的思想是让用户选择放置位置事件。如果您不想让他们选择，那么就不要使用拖放，这很简单。只需让用户在日历之外单击此特定事件。当用户单击它时，您就可以在正确的位置自动将事件添加到日历中。我仍然坚持认为，以任何方式使用拖放都会让用户感到困惑。这给出了预期他们可以选择活动的地点，但在这种情况下他们不能。因此，虽然您的解决方案从技术角度来看是正确的，但我认为它不是非常友好的。为什么不通过简单单击外部事件来处理此问题？单击后，它将被添加到日历中。完全同意您的评论，这不是用户friendly和我也更喜欢使用简单的点击，但是如果OP决定使用拖放，那么显示一条警告消息也可以。我个人认为OP决定使用拖放，因为他们没有正确考虑用例或替代方法。他们没有从用户的角度看问题，他们已经刚刚在fullCalendar网站上看到了拖放演示，并决定将其销毁。答案是使用单击代替（并解释原因）这将是一个非常好的答案，IMHO。也许如果我有时间，我会写一个，或者你可以添加它。@添加了lilo external按钮以将所有事件恢复到列表中，但是，如果日历上还有其他事件，你不想移动到外部列表中，那么在
var中添加另一个属性，例如
type:external
新事件={…
然后在
#返回列表
单击，检查
客户事件
如果类型为
外部
则移动到可拖动事件列表，否则不移动！并且也可以使用FullCalendar的eventClick功能仅撤消最后一个，因此如果使用eventClick，则不需要添加外部按钮。。