React Big Calendar using hooks inside onNavigate prevents navigation

Question

I'm using react-big-calendar to display events, I want to call a function to set state inside the onNavigate callback but doing this prevents navigation to the next month in the calendar view.

This is what I want to do which results to the calendar view not navigating

const [calendarStartDate, setCalendarStartDate] = useState(new Date());

        <DraggableCalendar
        localizer={localizer}
        defaultView="month"
        events={scheduledTestCases}
        style={{ height: "80%", width: "95%" }}
        views={{week: true, day: true, month: true}}
        onNavigate={(newDate: Date, view: View)=>setCalendarStartDate(newDate)}
      />

currently I can do this inside the onNavigate callback and the navigation works fine

    <DraggableCalendar
    localizer={localizer}
    defaultView="month"
    events={scheduledTestCases}
    style={{ height: "80%", width: "95%" }}
    views={{week: true, day: true, month: true}}
    onNavigate={(newDate: Date, view: View)=>console.log(newDate)}
  />

score 0 · Answer 1 · answered Oct 06 '21 at 20:55

React-Big-Calendar has three variables that can be 'controlled' or 'uncontrolled'. When you provide onView, onNavigate and onSelectEvent methods, RBC expects you to control the state of view, date and selected yourself. By providing your own onNavigate without a state controlled date prop, it will call your method, but most of the internals will do nothing.

React Big Calendar using hooks inside onNavigate prevents navigation

1 Answers1