React-Big-Calendar , Next and Back Buttons Not Navigating to the Correct Month

Question

I'm currently using the React-Big-Calendar library in my React project to display a calendar with the built-in navigation buttons (Today, Next, and Back). However, I've encountered an issue where the Next and Back buttons are not navigating to the correct month.

When I log the month value using the onNavigate attribute in the Calendar component, I can see that the month is changing correctly in the console. However, the calendar view itself does not switch to the selected month when I click the Next or Back button.

I have verified that the onNavigate callback is triggered, and the date parameter in the callback correctly reflects the new month. The issue seems to be with the rendering of the calendar view.

february month calendar image

next month is clicked but still the calendar is at february month image

"use client";
import React, { useState, useEffect, useMemo } from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
// const localizer = momentLocalizer(moment);
export default function ComplianceCalender() {
  const [events, setEvents] = useState([]);
  const localizer = useMemo(() => momentLocalizer(moment), [])
  const [todayDate, setTodayDate] = useState(
    new Date().toISOString().substring(0, 10).replace(/-/g, "-")
  );
  useEffect(() => {
    fetch(
"/api/activity-calender?filterCurrentMonth=${todayDate}"
    )
.then((response) => response.json())
      .then((data) => {
        const activitylist = data;
        // console.log("activitylist--------->>>>>>" , activitylist)
        const mappedData = activitylist.map((item) => {
          const calenderData = {
            id: item.id,
            title: item._count,
            start: item.executor_due_date,
            end: item.executor_due_date,
          };
          return calenderData;
        });
        setEvents(mappedData);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, [todayDate]);
  const handleCalendarNavigate = (date) => {
    console.log("Month ----->>>", moment(date).format("MMMM YYYY"));
    const formattedDate = date.toISOString().substring(0, 10).replace(/-/g, "-");
    setTodayDate(formattedDate);
  };
  return (
    <>
      <div className="row custom_row bg-white rounded-corner h-100 p-4">
        <div className="col-md-12 px-0">
          <Calendar
            localizer={localizer}
            events={events}
            // startAccessor="start"
            // endAccessor="end"
            style={{ height: 580 }}
            onSelectEvent={openModal}
            onNavigate={handleCalendarNavigate}
          />
        </div>
      </div>
    </>
  );
}

I was expecting that when I click the Next or Back buttons in the React-Big-Calendar, the calendar view would navigate to the corresponding next or previous month, respectively. I tried logging the month value using the onNavigate attribute to ensure that the callback is triggered and that the selected month is correct.

Answer 1

I tried copy pasting your code and testing it for myself, it works perfectly for me. All i have done is, commenting out your onSelectEvent and changing the activityList to some random stuff to test.

Here's the preview:

Here's the code:

    import React, {useEffect, useState, useMemo} from 'react';
    import { Calendar, momentLocalizer } from "react-big-calendar";
    import moment from "moment";
    import "react-big-calendar/lib/css/react-big-calendar.css";
    
    function App() {
        const [events, setEvents] = useState([]);
        const localizer = useMemo(() => momentLocalizer(moment), [])
        const [todayDate, setTodayDate] = useState(
            new Date().toISOString().substring(0, 10).replace(/-/g, "-")
        );
        useEffect(() => {
            fetch(
                "/currentMonth.json"
            )
                .then((response) => response.json())
                .then((data) => {
                    const activityList = data;
                    console.log("activitylist--------->>>>>>" , activityList)
                    const mappedData = activityList.map((item) => {
                        const calenderData = {
                            id: item.id,
                            title: item._count,
                            start: item.executor_due_date,
                            end: item.executor_due_date,
                        };
                        return calenderData;
                    });
                    setEvents(mappedData);
                })
                .catch((error) => {
                    console.error("Error fetching data:", error);
                });
        }, [todayDate]);
        const handleCalendarNavigate = (date) => {
            console.log("Month ----->>>", moment(date).format("MMMM YYYY"));
            const formattedDate = date.toISOString().substring(0, 10).replace(/-/g, "-");
            setTodayDate(formattedDate);
        };
    
        return (
            <>
                <div className="row custom_row bg-white rounded-corner h-100 p-4">
                    <div className="col-md-12 px-0">
                        <Calendar
                            localizer={localizer}
                            events={events}
                            // startAccessor="start"
                            // endAccessor="end"
                            style={{ height: 580 }}
                            //onSelectEvent={openModal}
                            onNavigate={handleCalendarNavigate}
                        />
                    </div>
                </div>
            </>
        );
    }

You might wanna check again by make a temporary new project and test this calender component only.

Answer 2

In next js 14 the react-big-calendar will give you this warning :

UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.

and you cant change the calendar view and you can't change the date.

To solve this error you should manage the views and dates with the state :

const [view, setView] = useState(Views.WEEK);
const [date, setDate] = useState(new Date());



<Calendar
  localizer={localizer}
  events={events}

  views={[Views.MONTH, Views.WEEK, Views.DAY]}
  defaultView={view}
  view={view} // Include the view prop
  date={date} // Include the date prop
  onView={(view) => setView(view)}
  onNavigate={(date) => {
      setDate(new Date(date));
  }}
/>

Now your code will works fine