fullcalendar v5 useref() in react does not contain calendar

user_4626394 0
Viewed 1306

I am using react version of fullcalendar and this is a part of my component:

const itMaker = React.useRef();
...
<FullCalendar
  ref={itMaker}
  ...
  customButtons={{
    prev: {
      click: function () {
        console.log('itMaker', itMaker)
        itMaker.current.calendar.incrementDate({ days: -1 });
      }
    }
  }}

useref() result is different in v4 and v5. The result in v4 is the same as bellow:

Imgur

❌ And this is the result of useref() in fullcalendar v5:

Imgur

The problem is that calendar exists in useref() in v4 but not in v5!!

reactjs fullcalendar javascript
1 Answers

try like this in class base:

export default class DemoApp extends React.Component {

  calendarRef = React.createRef()

  render() {
    return (
      <FullCalendar ref={this.calendarRef}  />
    )
  }

  someMethod() {
    let calendarApi = this.calendarRef.current.getApi()
    calendarApi.incrementDate({ days: -1 });
  }

}

or in function base:

export default function DemoApp () {

  calendarRef = React.useRef()

 
  return (
    <FullCalendar ref={calendarRef}  />
  )
  

  someMethod() {
    let calendarApi = calendarRef.current.getApi()
    calendarApi.incrementDate({ days: -1 });
  }

}
user_42566650
Related