Accessing Full Calendar API in ReactJS

Question

How do I access the full calendar API so that I can manipulate and use methods like setDates, moveStart etc.. I want to use the methods they provided in this page.

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

Problem: The example full calendar provided is class based and is outdated. How do I use these methods in a functional component..

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

}

What I did so far Currently I use the reference inside handleEventAdd and handleUpdate functions, I take the event and manipulate it accordingly.

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

What works:

const CalAPI = e.view.calendar

when I do this I can access the Calendar methods like

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

I use them like this

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

But I cannot access other methods like

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

The above don't work. Please find the list of the Event methods I want to use here https://fullcalendar.io/docs/Event-setDates

UPDATE: Posting more information on the functions.

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.

SOLUTION

Finally after a lot of work, the solution is quite simple actually, we are supposed to use the useRef hook when using functional components. Then access the CalAPI from yourRefname.current.getAPI()... from here on you can access all the needed methods.

PS: Thanks to @ADyson, I got closer to the answer.

Answer 1

For those coming back to this question in 2023 (fc v6), here is the solution. In this example, the calendar will jump to the current day on the button click:

import React, {useRef} from "react";
import FullCalendar from '@fullcalendar/react';

const Calendar = () => {
  const calendarRef = useRef();

  const jumpToToday = () => {
    let calendarApi = calendarRef.current.getApi();
    calendarApi.today();
  };

  return (
    <>
      <FullCalendar 
        //more props...
        ref={calendarRef}
      />
      <button onClick={jumpToToday}>
        Jump to today
      </button>
    </>
  )
}