如何在不等待数据库添加的情况下在全日历中添加事件

Question

我想出了如何在全日历中快速添加事件，想法是添加到日历、显示并保存到数据库后，无需等待数据库，但是最近添加的事件在返回一周和回来时会重复.

将事件添加到日历的代码是这样的：

// First add the event to calendar, displaying almost instantly.
      var idTemp = Math.floor(Math.random() * 100000) + 1;

                        var event = {
                            id: idTemp,
                            title: TextoEvento,
                            start: CalendarInfoSelect.start,
                            end: CalendarInfoSelect.end,
                            allDay: false,
                            tituloOriginal: TextoEvento,
                            backgroundColor: colorEvento,
                            textColor: colorEventoTexto
                        };
                       calendar.addEvent(event );

                     // Then, add to database:
                              $.ajax({
                                cache: false,
                                url: '@Url.Action("EventAddedTareaReciente", "CH")',
                                type: "POST",
                                dataType: 'json',
                                data: {
                                    id: Idbd,
                                    idAct: IdAct,
                                    idProy: IdProy,
                                    idProd: IdProd,
                                    newStart: CalendarInfoSelect.startStr,
                                    newEnd: CalendarInfoSelect.endStr,
                                    ini: CalendarInfoSelect.start.toISOString(),
                                    fin: CalendarInfoSelect.end.toISOString()
                                },
                                success: function (data) {
                                    if (data.Id > 0) {
                                        event = calendar.getEventById(idTemp);

                                        // Here set id with database's one
                                        event.setProp('id', data.Id);
                                    }
                                    else {
                                        event = calendar.getEventById(idTemp);
                                        event.remove();
                                    }
                                },
                                error: function (xhr) {
                                    event = calendar.getEventById(idTemp);
                                    event.remove();

                                }
                            });

这里没有错误，它工作正常。但是，当用户点击返回一周后又回到原来的一周时，事件就会重复。

如果用户以这种方式添加多个事件，则此事件在日历中会重复。但它们在数据库中不会重复当刷新浏览器 (F5) 时，显示完全没问题。

就像这样添加的事件在内存中变得粘滞。

任何帮助，想法？我找不到解决办法。也许还有另一种方法可以做到这一点。

我使用 FullCalendar Core Package v4.3.1

谢谢

Answer 1

根据https://fullcalendar.io/docs/v4/Calendar-addEvent，如果您为事件指定了一个事件源（从逻辑上讲，它应该与您从数据库接收事件时从中获取事件的源相同），那么当源是 re-fetched（例如当日历日期更改时）它将从日历中清除 locally-added 事件。

如果您在设置日历时没有定义特定的事件源，现在是时候稍微修改您的选项以支持它了 - 请参阅 https://fullcalendar.io/docs/v4/eventSources and https://fullcalendar.io/docs/v4/event-source-object

示例：

事件源在日历配置中定义：

eventSources: [{
  id: 1,
  url: '/events'
}]

手动添加到日历的事件与事件源关联：

calendar.addEvent(event, 1);

如何在不等待数据库添加的情况下在全日历中添加事件

How add events in fullcalendar without wait for database adding

javascript

jquery

fullcalendar

fullcalendar-4