Question

从jquery FullCalendar切换到React FullCalendar组件 Doc 之后，我发现某些功能无法正常工作（或者我可能未实现），例如： event.remove()

我正在寻找的功能是可以清除现有事件中的日历。

我要使用此功能的原因是，当我在日历中放入一个事件后，我使用了eventReceive 函数将此新事件保存在服务器端，并且由于我的日历将事件用作Array，因此我可以看到此新事件来自服务器，但是我也看到了已经将其放入日历看起来像是兑现了，因为如果我控制源数组，我可以看到此事件不在其中。

代码：

像

那样导入日历

import FullCalendar   from '@fullcalendar/react';
import listPlugin     from "@fullcalendar/list";
import dayGridPlugin  from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
import "@fullcalendar/list/main.css";

在JSX视图中

<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}
 /**
 * Event Functions
 */
 drop         ={this.drop }
 eventDrop    ={this.eventDrop}
 eventClick   ={this.eventClick}
 eventResize  ={this.eventResize}
 datesRender  ={this.datesRender}
 eventReceive ={this.eventReceive}
 eventDestroy ={this.eventDestroy}
 ref          ={this.calendarComponentRef}
/>

我添加了一个带有测试功能的按钮，以开始使用日历功能，最后得到两组WORKING & NOT WORKING功能，例如。

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);
}

在文档page中，“事件”列表下有一些方法

Calendar::getEvents
Calendar::getEventById
Calendar::addEvent
Event::setProp
Event::setExtendedProp
Event::setStart
Event::setEnd
Event::setDates
Event::setAllDay
Event::moveStart
Event::moveEnd
Event::moveDates
Event::formatRange
Event::remove
Event::getResources
Event::setResources

我意识到我可以定位大多数Calendar::函数，但是另一方面，{ref1}函数不能使用ref

定位。

Event::

但是作为文档says，当我使用const calendar = this.calendarComponentRef.current.getApi();时，我将能够从所有来源中重新提取事件并将其重新呈现在屏幕上。

但是此功能不执行任何操作并保持视图不变

Animation Screen shoot

事件删除后，React FullCalendar无法清除事件

0 个答案: