How to get the first and last visible date in React Big Calendar?

How to get the first and last visible date in React Big Calendar? This will facilitate database queries to view events. I’m trying to call the onNavigate () function and get start and end using the moment library, but both values areundefined.

Update

I get the value of start. end only when I press the back, next arrows. How do you get these values automatically when the calendar appears?

class App extends Component {
  constructor() {
    super();
    this.state = {
      current_date: '',
      events: [{
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2019, 3, 0),
          end: new Date(2019, 3, 1),
        },
        {
          id: 1,
          title: 'Long Event',
          start: new Date(2019, 3, 7),
          end: new Date(2019, 3, 10),
        }
      ]
    };  
  }


onNavigate =(date, view) => {
  let start, end;

  if (view === 'month') {
    start = moment(date).startOf('month').startOf('week')
    console.log(start)
    end = moment(date).endOf('month').endOf('week')
  }
  console.log(start, end);

  return console.log({ start, end });
}

  render() {
    console.log(this.state.current_date)
    return (
      <div>
        <Calendar
           localizer={localizer}
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
            onNavigate={this.onNavigate()}
          />
        </div>
    );
  }
}

Answer

As you are not passing any date prop to Calendar, default date is current date. Simulate onNavigate call from your componentDidMount, like:

componentDidMount() {
    this.onNavigate(new Date(), "month");
}

BTW, onNavigate is called only back/next navigation. You would also like to handle onView, as changing from week-view to month-view will expand displayed date range.