react-big-calendar navigate to specific day / month

I'm using BigCalendar react-big-calendar, and I'm trying to find an example on how to navigate to specific day / month when defaultDate state value changes.

<BigCalendar events={props.events} defaultDate={this.state.selectedDay} /> 

I’m wondering if BigCalendar calendar supports navigating into a specific day / month, the documentation include onNavigate prop, but I haven't been able make it work.

 <BigCalendar selectable events={events} defaultView='week' defaultDate={this.state.selectedDay} onNavigate={() => { this.state.selectedDay }} /> 

Thanks

3 Answers

you don't want to use defaultDate in this case since you are controlling the value yourself

<BigCalendar selectable events={events} defaultView='week' date={this.state.selectedDay} onNavigate={date => { this.setState({ selectedDate: date }); }} /> 

that will tell teh calendar, to always use the date you tell it to.

I tried using the chosen answer to this question where it says to update the date property. But when it navigated to the date I was not able to use the navigation button.

For example when I clicked the next button nothing happened.

So what I did was, I used onNavigate .The first provided argument of that method is the date object. When I clicked the button the onNavigate was triggered and I was able to update the date and have the button work.

This is my solution:

<Calendar date={date} onChange={onDateChange} onNavigate={date => { setDate(date); }} value={date} showNeighboringMonth={false} selectRange={true} localizer={localizer} events={props.events} startAccessor='start' endAccessor='end' style={{ height: 600 }} defaultView={props.defaultView} components={{ event: EventComponent }} />