react-big-calendar - handleRangeChange didn't change on month with Drag'n'Drop

Question

I am struggling with and issue with react-big-calendar and handleRangeChange functionality.

When I didn't use Drag'n'Drop there were now issue, but after it this function is not working properly.

const handleRangeChange = (range: any, view: any) => {
  view !== undefined && setCurrentView(view)
  const calendarView = view || currentView
  if (calendarView === 'week' || calendarView === 'day') {
    setCurrentDate(range[0])
  } else {
    setDateRange({ startDate: range.start, endDate: range.end })
  }
}

Switch to month view - range jumps one range forward or backward, but month is still set on January. When clicking on "Month" it switches range further back (can't switch forward), but didn't change currentDate (so events are not fetched to calendar view).

When setting:

if (calendarView === 'week' || calendarView === 'day' || calendarView === 'month') {
  setCurrentDate(range[0])
}

Months are switching properly, but currentDate is than set to undefined, so even after useEffect data fetch on currentDate - no data is shown.

setCurrentDate(range.start)

Also didn't work as intended.

I don't really know why it stopped working and where is the problem.

My other setup of Calendar:

<DnDCalendar
  components={components}
  date={currentDate}
  defaultView={currentView}
  startAccessor={(event: object) => (event as FormattedEventData).start}
  endAccessor={(event: object) => (event as FormattedEventData).end}
  draggableAccessor={(event: object) => (event as FormattedEventData).status === 'CONFIRMED'}
  eventPropGetter={(event: object) => eventPropGetter(event as FormattedEventData)}
  events={formattedEvents}
  formats={formats}
  localizer={localizer}
  max={maxTime}
  min={minTime}
  messages={messages}
  onEventDrop={moveEvent}
  onEventResize={resizeEvent}
  onDrillDown={onDrillDown}
  onSelectSlot={handleSelectSlot}
  onSelectEvent={(event: object) => handleSelectEvent(event as FormattedEventData)}
  onRangeChange={handleRangeChange}
  resizable
  resources={resourceView ? rooms?.content : undefined}
  // resourceIdAccessor={resourceView ? 'id' : undefined}
  // resourceTitleAccessor={resourceView ? 'name' : undefined}
  selectable={'ignoreEvents'}
  // scrollToTime={scrollToTime}
  showAllEvents = {true}
  slotPropGetter={() => ({ style: { minHeight: '15px' } })}
  step={5}
  style={{ minHeight: 700, height: '100%' }}
  timeslots={6}
/>

Any help would be welcomed!

Answer 1

Just add onNavigate ... that's all. I asume drag'n'drop needs that to work properly (even if standard version didn't).

const onNavigate = useCallback((date: Date) => setCurrentDate(date), [setCurrentDate])