How to clear the FullCalendar cache events - reactjs

Question

After drop an event from an external list and save this event on me server side i keep seeing the dropped event which is not in my source array.
I tried a lot of solutions to clear events using EventSources as in this topic, but what is happening is that all the events who came from the API are cleared but not the one who I dropped the blue one (CACHED).
In action : I have already red event in my view, and I add another red event from my drop list, but after the drop you will see the new red event that I add + another blue event (CACHED EVENT) this blue event is not in my source event list.
Using calendar.getEventSources() to clear the event is clearning only the event from the API, results is like this
Any suggestions?
Thanks in advance
CODE :
import React, { Component } from "react";
import $ from 'jquery';
import moment from 'moment';
import { Trans } from 'react-i18next';
import { DebounceInput } from 'react-debounce-input';
import FullCalendar from '#fullcalendar/react';
import dayGridPlugin from "#fullcalendar/daygrid";
import timeGridPlugin from "#fullcalendar/timegrid";
import listPlugin from "#fullcalendar/list";
import interactionPlugin, { Draggable } from "#fullcalendar/interaction";
import { Module } from '../Calender/Module';
import { CalendarLoad } from '../../../../../Util/Svg';
import { getFlyerById } from '../../../../../Util/Api/Cms';
import { withAlert } from 'react-alert';
import "#fullcalendar/core/main.css";
import "#fullcalendar/daygrid/main.css";
import "#fullcalendar/timegrid/main.css";
import "#fullcalendar/list/main.css";
import './CalendarV4.css';
class CalendarDemo extends Component
{
calendarComponentRef = React.createRef()
state = {
modalData: null,
isModalOpen: false,
eventReceiveStartDate: null,
isEventinTheView: null,
isEventinTheViewValue: ''
};
componentDidMount()
{
const draggableEl = document.getElementById("externalEvents");
new Draggable(draggableEl, {
itemSelector: ".draggable-events",
eventData: function(eventEl)
{
const title = eventEl.getAttribute("title");
const id = eventEl.getAttribute("id");
const duration = eventEl.getAttribute("data-duration");
return {
title: title,
id: id,
duration: duration
};
}
});
}
eventDrop = info =>
{
const string = info.event.title;
const stringId = string.split(' - ')[0];
const id = parseInt(stringId)
this.props.schedulesEvent(id, info.event.start, info.event.end)
};
eventReceive = info =>
{
this.setState({ eventReceiveStartDate : moment(info.event.start).format("YYYY-MM-DD") })
this.props.addToCalendarHandler(info.event.id, info.event.start , info.event.end);
};
drop = info =>
{
if ($('#RemoveAfterDrop').is(':checked')) {
$(`#externalEvents #${info.draggedEl.id}`).each(function() {
$(this).remove();
})
}
};
eventClick = info =>
{
const string = info.event.title;
const stringId = string.split(' - ')[0];
const id = parseInt(stringId)
this.setState({ isModalOpen: true });
getFlyerById(info.event.id).then( res => {
this.setState({ modalData: {...res.data ,eventId: id} });
})
};
eventResize = info =>
{
const string = info.event.title;
const stringId = string.split(' - ')[0];
const id = parseInt(stringId)
this.props.schedulesEvent(id, info.event.start, info.event.end)
};
datesRender = info =>
{
const viewActiveStart = moment(info.view.activeStart).format("YYYY-MM-DD");
const viewActiveEnd = moment(info.view.activeEnd).format("YYYY-MM-DD");
const range = `${viewActiveStart}/${viewActiveEnd}`
this.props.datesRangeHandler(range);
}
deleterFlyer = id =>
{
this.setState({
modalData: null,
isModalOpen: false
});
this.props.deletingEventHandler(id)
}
modalToggleHandler = () =>
{
this.setState({ isModalOpen : false, modalData: null})
};
isEventinTheView = id =>
{
const calendar = this.calendarComponentRef.current.getApi();
this.setState({
isEventinTheView : calendar.getEventById( id ) === null ? false : true,
isEventinTheViewValue: calendar.getEventById( id ) === null ? 'No' : 'YES'
})
if ( id === '' ) {
this.setState({ isEventinTheViewValue : '' })
}
};
testingAndDebugging = () => {
const calendar = this.calendarComponentRef.current.getApi();
let eventSources = calendar.getEventSources();
for (var i = 0; i < eventSources.length; i++) {
eventSources[i].remove();
}
};
render()
{
const { modalData, isModalOpen, isEventinTheViewValue, isEventinTheView } = this.state;
const { modifiedEvents } = this.props
return (
<div>
<FullCalendar
plugins={[
dayGridPlugin,
timeGridPlugin,
listPlugin,
interactionPlugin
]}
header= {[{
center: "title",
right : "today prev,next",
}]}
firstDay ={1}
timezone ="UTC"
defaultView ="dayGridMonth"
editable ={true}
droppable ={true}
selectable ={true}
eventLimit ={true}
forceEventDuration ={true}
events ={modifiedEvents}
drop ={this.drop }
eventDrop ={this.eventDrop}
eventClick ={this.eventClick}
eventResize ={this.eventResize}
datesRender ={this.datesRender}
eventReceive ={this.eventReceive}
ref ={this.calendarComponentRef}
/>
<Module
modalData ={modalData}
isModalOpen ={isModalOpen}
deletingEventHandler ={this.deleterFlyer}
modalToggleHandler ={this.modalToggleHandler}
/>
<div className="calendarNotLoad">
<CalendarLoad />
</div>
<div className="mt-5">
<h4 className="mt-4 mb-4"><Trans>Is this Flyer ID exist in this view</Trans></h4>
<DebounceInput
className={`calendar-flyer-search ${isEventinTheView ? 'green' : 'red'}`}
type="text"
placeholder="Search for a Flyer in this month"
minLength={1}
debounceTimeout={700}
value={ isEventinTheViewValue }
onChange={ e => this.isEventinTheView(e.target.value) }
onBlur={ () => this.setState({ isEventinTheViewValue : '', isEventinTheView : null })}
/>
</div>
<div className="text-right">
<button className="btn mt-5 fc-prev-button fc-button fc-button-primary" onClick={ this.testingAndDebugging }>calendar.getEventSources()</button>
</div>
</div>
);
}
}
export default withAlert(CalendarDemo)
I add a button with a test function to start a playing around with the calendar functionality, and end up with two groups WORKING & NOT WORKING functions, like.
testingAndDebugging = () => {
const calendar = this.calendarComponentRef.current.getApi();
// WORKING EVENTS
//===============
calendar.render();
calendar.refetchEvents();
calendar.addEventSource(modifiedEvents);
calendar.batchRendering(function() {
calendar.changeView('timeGridWeek');
})
calendar.getEventSources();
calendar.on('dateClick', function(info) {
console.log('clicked view ' + info.view );
});
// NOT WORKING
//===============
calendar.removeEventSource();
calendar.removeEvents();
calendar.removeEvents(10157);
calendar.removeEvent();
calendar.removeEvent(10157);
}