2

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.

WildThing
  • 969
  • 1
  • 12
  • 30
  • "cannot" means what exactly? Do you get an error? If you can write `CalAPI.getEventById(e.event.id).remove()` then logically you can also write `CalAPI.getEventById(e.event.id).setDates("2021-09-27", "2021-09-29", true);` or similar. What goes wrong if you try that? You have not been very clear what the specific problem is. – ADyson Sep 28 '21 at 00:00
  • Hey @ADyson..! Yes, I get an error saying CalAPI undefined. It works on the callback functions whenever I pass the parameter "e" with eventDrop, eventResize and select, but It does not work on eventClick. I noticed eventClick returns two objects, " el " and the " event " but the CalAPI is not being recognized on both of them. will update the question just a little but to show you the functions that are working. thanks! – WildThing Sep 28 '21 at 10:22
  • Yes please, can you edit the question to provide a [mre] please containing the exact code and the exact error message, rather than just a description of the code. Then it'll be much easier to try and understand exactly what might have gone wrong. Thanks. – ADyson Sep 28 '21 at 10:25
  • Sure I will post reproducible code, meanwhile please take a look at the updated. – WildThing Sep 28 '21 at 10:29
  • Obviously I don't know where your Deleteevent and Updateevent functions are located but I would guess that maybe it's simply that CalAPI is out of scope wherever they are defined. – ADyson Sep 28 '21 at 10:41
  • But also you should just be able to write e.g. `eventClick={Deleteevent}` ...I don't think you need to make the anonymous callback like you showed. – ADyson Sep 28 '21 at 10:42
  • gotcha thank you! I will make some modifications and produce an example later today. – WildThing Sep 28 '21 at 10:44
  • Deleteevent and Updateevent are located just like all other functions, in the main function body. And I am trying to access them like this, const deleteevent = (e) = {CalAPI = e.view.cal} – WildThing Sep 28 '21 at 10:47
  • Ok. Why are you doing it like that though? https://fullcalendar.io/docs/react explains the recommended way to get access to the API object. In fact you're doing it in your first snippet with `let calendarApi = this.calendarRef.current.getApi()` ...not sure why you've suddenly started trying to go via the view object instead. (Admittedly I don't know React at all so maybe you had some logic for doing that, but it's not obvious what it is.) – ADyson Sep 28 '21 at 10:52
  • Oh.. that's because there is no this in a react functional component, all the examples on Full Calendar is class based and I was trying to implement all this in Functional, that's why I was having all these issues :) – WildThing Sep 28 '21 at 10:56
  • ok. You might have to wait for someone with React expertise to take a look, but is there no other way to get a reference to the ` – ADyson Sep 28 '21 at 11:00
  • Yes I have also tried the other way the Official documentation suggests, we can provide ref={calendarRef} as a prop and then access it like this ... calendarRef.current.props.timeZone, this works sometimes also, but it does not work on event click. It just does not find the current or getApi stuff like that – WildThing Sep 28 '21 at 11:04
  • 1
    It's great you found the solution...but: Stackoverflow follows a question-and-answer format. The answer does not belong within your question text! Instead please move it to the Answers area below - you're permitted (and indeed encouraged) to answer your own questions. That way the answer can be searched for, voted on and appraised on its own merits, separate from the question. Questions seemingly without an answer don't rate so highly in search results so it's harder for others to find and benefit from the information (and you upvote you for your efforts! Take the [tour] for more info - thanks – ADyson Sep 28 '21 at 21:39

1 Answers1

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>
    </>
  )
}
JBrown
  • 825
  • 6
  • 22