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

Question

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 1

You made a common mistake when using arrow functions inside react components. just simply by changing onNavigate={this.onNavigate()} to onNavigate={this.onNavigate} your problem will be solved. I will give you a simple example to find waht is happening here. If you simply want to pass a function to an onClick handler you can define your function and pass it to onClick by three ways:

1- Define an arrow function and passing it:

class Example extends Component {

    clickHandler=()=>{
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={this.clickHandler}>
                Example
            </div>
        );
    }
}

2- Define a common function and passing it:

class Example extends Component {

    clickHandler(){
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={()=>this.clickHandler()}>
                Example
            </div>
        );
    }
}

3- Define a function and binding it (this is old and is not common any more in ES6):

class Example extends Component {

    clickHandler(){
        console.log('I am clickHandler');

    }


    render() {

        return (
            <div onClick={this.clickHandler.bind(this)}>
                Example
            </div>
        );
    }
}

I hope this is helpful for you.

Answer 2

You're getting undefined because of this : onNavigate={this.onNavigate()}

This will cause this.onNavigate to be called with () ( No params ) and date will be undefined, therefore, start and end will be undefined,

You're calling the function instead of passing it

You should pass this.onNavigate either like :

onNavigate={this.onNavigate}

Or :

onNavigate={(date, view) => this.onNavigate(date, view)}

See : navigate to a specific date

Answer 3

You can get first and last visible date using this

Component:

    import dates from 'react-big-calendar/lib/utils/dates';
...
        onNavigate = (date, view, action) => {
            console.log(dates.firstVisibleDay(date), dates.lastVisibleDay(date));
        }
...

Answer 4

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.

Answer 5

I was trying to apply the answers I saw here, but finally, open the source files and found a simple onRangeChange prop that returns the visible range.

onRangeChange={range => {
    console.log(range)
}}

Also, pay attention that for the Month view it returns a structure like { start, end }, but for the Week view, you will receive an array [0, ..., 6] for all the days of week. And it does not work for the Schedule view.

I didn't find how to get this range on initialization, but I believe the start date is not less than -7 days from the start of the month, and the end date is +7 days accordingly, so my solution is:

 // I use dayjs, but you can use moment or anything else
 const start = dayjs().startOf('month').subtract(7, 'day')
 const end = dayjs().endOf('month').add(7, 'day')

Answer 6

You can use this in component:

useEffect(() => {
    toolbar.onNavigate('TODAY');
}, []);

In Calendar:

onNavigate={(event, view, action) => { 
    console.log(event, view, action}); 
    // Fri Jun 11 2021 03:06:06 GMT-0300 (Brasilia Standard Time)
    // week
    // TODAY
}}