Блог

Я выяснил, как быстро добавить событие в fullcalendar, идея заключается в добавлении в календарь, отображении и после сохранения в базе данных, без ожидания базы данных, но затем события, недавно добавленные, дублируются при возврате на неделю и возвращении.

Код для добавления события в календарь таков:

 // 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 версии 4.3.1

Спасибо

Согласно https://fullcalendar.io/docs/v4/Calendar-addEvent , если вы укажете источник события, к которому должно принадлежать событие (по логике вещей, это должен быть тот же источник, из которого вы извлекаете свои события при получении их из базы данных), то при повторной выборке источника (например, при изменении календарной даты) он очиститлокально добавленное событие из календаря.

Если вы не определили конкретный источник событий при настройке календаря, сейчас самое время немного изменить свои параметры, чтобы поддержать это — см. https://fullcalendar.io/docs/v4/eventSources и https://fullcalendar.io/docs/v4/event-source-object

Пример:

Источник события определяется в конфигурации календаря:

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

Событие, добавленное вручную в календарь, связано с источником события:

 calendar.addEvent(event, 1);