在日历上放置外部事件后，完整日历是否必须重新呈现每个事件

Question

我正在构建一个允许用户将外部事件拖到日历上的日历。当他们这样做时，ajax 调用会触发并将事件保存到数据库。为了了解哪个事件被调整大小或重新安排，我使用刚刚在数据库中创建的事件 id 更新事件。这意味着如果我需要进一步更新事件。即有人移动事件或确实更改持续时间等，我可以使用另一个 Ajax 调用触发 ID 并更新事件。

问题是，每次将事件放在日历上时，每个事件似乎都会重新渲染，从而清除id添加到每个事件的id。有什么方法可以防止完全重新渲染吗？还是在元素上保留 ID 的方法？您可以在下面看到我将 ID Occurrenceance-387 添加到 HTML 中，但是当我添加另一个事件时，它会被清除。任何帮助将不胜感激！:-)

<a class="fc-day-grid-event fc-event fc-start fc-end  fc-draggable fc-resizable _fc4" id="occurance-387"><div class="fc-content"> <span class="fc-title">A Very Short Introduction to… Anxiety</span></div><div class="fc-resizer"></div></a>

Answer 1

不要将您的 id 添加到 html 中。 您应该将 id 作为属性存储在事件对象中。 然后，当您需要更新数据库时，可以从事件对象中获取 id。

eventResize: function(event){
    $.ajax('http://myendpoint.com/?saveNewEndDate", {id:event.id,newEndTime: event.end.format()},function(data){
        if(data) {alert('Success!');}
    });
}

还有其他传递给函数的变量可能很有用：delta，revertFunc。 有关详细信息，请查看文档。

在我的实现中，每当使用drop回调函数将新事件保存到日历时，我的ajax响应都会返回日历eventObject的json表示形式，然后我调用renderEvent方法将其添加到日历中。 我的 json 事件对象包含一个 id 属性。

$(#calendarContainer').fullCalendar('renderEvent', results.calendarEvent);