ReactJS函数组件中如何调用Full Calendar API的Event系列操作方法

问题描述 #

FullCalendar官方给出的API调用示例为过时的类组件写法，开发者在React函数组件中调用setDates、moveStart等官方提供的API方法时没有明确的参考实现。

官方类组件参考示例 #

export default class DemoApp extends React.Component {
  calendarRef = React.createRef()
  render() {
    return (
      <FullCalendar ref={this.calendarRef} plugins={[ dayGridPlugin ]} />
    )
  }
  someMethod() {
    let calendarApi = this.calendarRef.current.getApi()
    calendarApi.next()
  }
}

已实现的原有方案 #

在handleEventAdd、handleUpdate等事件回调中通过事件引用操作日历，组件绑定代码如下：

<FullCalendar
  nowIndicator
  plugins={[momentTimezonePlugin, timeGridPlugin, dayGridPlugin, interactionPlugin]}
  initialView="timeGridWeek"
  headerToolbar={{
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay',
  }}
  timeZone={userTimezone || Intl.DateTimeFormat().resolvedOptions().timeZone}
  ref={calendarRef}
  editable
  selectable
  select={handleEventAdd}
  eventResize={(e) => handleupdateSchedule(e)}
/>

原有方案可调用能力 #

通过const CalAPI = e.view.calendar可以成功调用Calendar层面的方法，包括：

• Calendar::getEvents
• Calendar::getEventById
• Calendar::addEvent

调用示例CalAPI.getEventById(e.event.id).remove()可正常运行。

原有方案存在的问题 #

无法调用Event层面的如下方法：

• Event::setProp
• Event::setExtendedProp
• Event::setStart
• Event::setEnd
• Event::setDates

补充测试验证：

• select={Addevent} 不传参数e也可正常运行
• eventClick={(e) => Deleteevent(e)} 回调中找不到CalAPI引用
• eventDrop={(e) => Updateevent(e)} 回调中找不到CalAPI引用
• eventResize={(e) => Updateevent(e)} 日历事件自动刷新，无需调用CalAPI

最终解决方案 #

在React函数组件中使用useRef钩子绑定FullCalendar组件，通过yourRefname.current.getAPI()即可获取CalAPI实例，进而调用所有需要的API方法。

内容的提问来源于stack exchange，提问作者WildThing