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 ponent, 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.
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 ponent, 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.
Share Improve this question edited Feb 18, 2024 at 19:37 ADyson 62.1k16 gold badges78 silver badges91 bronze badges asked Feb 17, 2024 at 7:11 Rohan GuptaRohan Gupta 411 silver badge3 bronze badges2 Answers
Reset to default 8In next js 14 the react-big-calendar will give you this warning :
UNSAFE_ponentWillReceiveProps in strict mode is not remended 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
I tried copy pasting your code and testing it for myself, it works perfectly for me. All i have done is, menting 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 ponent only.