Reactjs 如何清除FullCalendar缓存事件
从外部列表中删除事件并将此事件保存到me服务器端后，我会一直看到删除的事件，但它不在源阵列中 我尝试了许多解决方案来使用Reactjs 如何清除FullCalendar缓存事件,reactjs,fullcalendar,fullcalendar-4,Reactjs,Fullcalendar,Fullcalendar 4,从外部列表中删除事件并将此事件保存到me服务器端后，我会一直看到删除的事件，但它不在源阵列中 我尝试了许多解决方案来使用EventSources清除事件，如中所示，但实际情况是，所有来自API的事件都被清除，而不是我丢弃蓝色事件（缓存）的事件 在操作中：我已经在视图中添加了红色事件，并且我从下拉列表中添加了另一个红色事件，但是在下拉列表之后，您将看到我添加的新红色事件+另一个蓝色事件（缓存事件）此蓝色事件不在我的源事件列表中 使用calendar.getEventSources（）清除事件只会清
EventSources红色事件红色事件新红色事件蓝色事件（缓存事件）calendar.getEventSources（） 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)
请同时显示您的代码。我们无法修复看不见的代码。谢谢。@ADyson它已经在我在帖子中提到的完整细节问题中了（我计划在更长的问题中提供细节）谢谢你不能在多个问题之间分割，这可能会使这篇帖子偏离主题，或者使一个候选人成为重复的，然后关闭。看见此外，无论如何，你应该尝试让人们更容易地帮助你——在这里复制相关的细节，这样就可以把所有的内容放在一起了。Thanks@ADyson谢谢你的建议，我在这里添加了代码
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);
}