Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 914
Deano Avatar asked Feb 08 '17 17:02

Deano


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

like image 61
monastic-panic Avatar answered Dec 25 '22 09:12

monastic-panic


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.

like image 20
jack blank Avatar answered Dec 25 '22 10:12

jack blank