时间戳

首页 > 解决方案 > 在 ReactJS 中访问完整的日历 API

reactjs - 在 ReactJS 中访问完整的日历 API

问题描述

如何访问完整的日历 API，以便我可以操作和使用 setDates、moveStart 等方法。我想使用他们在此页面中提供的方法。

https://fullcalendar.io/docs/Event-setDates

问题：提供的完整日历示例是基于类的并且已过时。如何在功能组件中使用这些方法..

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::getEvents
Calendar::getEventById
Calendar::addEvent

我像这样使用它们

CalAPI.getEventById(e.event.id).remove() //works

但我无法访问其他方法，例如

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

以上都行不通。请在此处找到我要使用的事件方法列表https://fullcalendar.io/docs/Event-setDates

更新： 发布有关功能的更多信息。

select={Addevent} // works even when I don`t pass the "e"
eventClick={(e) => Deleteevent(e)} // does not find CalAPI reference
eventDrop={(e) => Updateevent(e)} // does not find CalAPI
eventResize={(e) => Updateevent(e)} // the calendar event refreshes automatically I dont need the CalAPI here.

解决方案

最后经过大量的工作，解决方案其实很简单，我们在使用功能组件时应该使用 useRef 钩子。然后从 yourRefname.current.getAPI()... 访问 CalAPI... 从这里您可以访问所有需要的方法。

PS：感谢@ADyson，我离答案更近了。

标签： reactjsfullcalendarfullcalendar-5

解决方案

推荐阅读