score:1

Accepted 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.

score:0

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

score: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

score:2

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));
        }
...

score:2

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')

score:5

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.


Related Query

More Query from same tag