Calendar Navigation and View Controls Not Functioning

[NikhilBhagoria]

Check that this is really a bug

• I confirm

Reproduction link

https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/additional-examples-event-durations--daylight-savings-starts

Bug description

Description
Both the navigation buttons (Today/Back/Next) and view controls (Month/Week/Day/Agenda) in the Calendar component are not working. Users cannot navigate through dates or switch between different calendar views.

Expected Behavior

Navigation buttons:

• Today button: Should navigate to current date
• Back button: Should navigate to previous period based on current view
• Next button: Should navigate to next period based on current view

View controls:

• Month button: Should switch to month view
• Week button: Should switch to week view
• Day button: Should switch to day view
• Agenda button: Should switch to agenda view

Actual Behavior

Navigation buttons:

• Today button: No response when clicked
• Back button: No response when clicked
• Next button: No response when clicked

View controls:

• Month button: No response when clicked
• Week button: No response when clicked
• Day button: No response when clicked
• Agenda button: No response when clicked

react-big-calendar version

1.17.1

React version

19.0.0

Platform/Target and Browser Versions

Chrome

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[ardenc]

I was unable to reproduce this on any of the calendars on your reproduction page.

Does this happen to you for every single calendar on the example site?
If so just to rule it out perhaps test it with a different browser you don't typically use.
I see you are using Chrome which certainly works but perhaps you have something setup that is interfering. Try it with Edge or Firefox just to rule that out.

[Waleed-abdullah]

Wasn't working for me in my local setup as well, even though i had set it up according to the docs and examples,
Had to manage the state myself using the onView and view props then it started working

export const useCustomCalendar = () => {
  const [view, setView] = useState<View>('week');
  const [date, setDate] = useState<Date>(new Date());
  const onView = useCallback((view: View) => {
    setView(view);
  }, []);

  const onNavigate = useCallback((date: Date) => {
    setDate(date);
  }, []);

  return {
    view,
    date,
    onView,
    onNavigate,
  };
};

[ericvanular]

I'm also experiencing this in React 19. Console error:

Your app (or one of its dependencies) is using an outdated JSX transform.

[NikhilBhagoria]

@ardenc I am trying different browsers, but it's not working. I tried it in the old version of ReactJS, and it's fine. The problem only occurs in the new version of ReactJS 19.

[ardenc]

@NikhilBhagoria ah,
Try the new release for RBC that just got pushed out 2 days ago.
It mentions supporting React 19.

[ericvanular]

@ardenc I'm on RBC 1.18.0 (new release) and this bug is still present

[ardenc]

@ericvanular I spun up a quick Nextjs example using React 19 and RBC and it appears to work as expected for me. I see the out of date transform as you stated but the calendar itself appears to navigate as expected.

https://codesandbox.io/p/devbox/tlxwg8?file=%2Fapp%2Fpage.tsx%3A16%2C16

[ericvanular]

@ardenc thanks for your help with this. I double checked and my project is definitely on React 19.0.0 and RBC is on 1.18.0 - although I'm using Vite not Next. Perhaps there is some side effect coming from another package?

[dmcdaniel90]

@ericvanular Experiencing the same here on React 19.0.0 and RBC 1.18.0 using Vite. Downgrading to v18 seems to work.