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...
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 }}
/>
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
