react-big-calendar navigate to specific day / month

Question

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

put the console i think it will pass the date selected in callback method, and you need to set that date in defaultDate, try this: `onNavigate={(a,b,c) => { console.log(a,b,c); this.steState(selectedDay: /*date value*/) }}` check the console value of a b c, any one of them should be the selected date. — Mayank Shukla, Feb 08 '17 at 17:30

score 14 · Accepted Answer · edited Aug 23 '19 at 16:58

14

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.

edited Aug 23 '19 at 16:58

Belciug Ovidiu-Mihai

52
1
12

answered Feb 08 '17 at 17:38

monastic-panic

3,987
1
22
20

@monastic-panic is there a way to do this from within a custom toolbar component? – Clark T. Feb 13 '17 at 17:54
I think I tried this way of setting `date` but it disabled the nav (next buttons) for some reason – jack blank Dec 03 '20 at 14:13

score 3 · Answer 2 · answered Dec 03 '20 at 15:47

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.

score 1 · Answer 3 · answered Sep 07 '22 at 20:35

1

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

answered Sep 07 '22 at 20:35

user19944430

11
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 12 '22 at 23:36

react-big-calendar navigate to specific day / month

3 Answers3