最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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 badges
Add a ment  | 

2 Answers 2

Reset to default 8

In 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.

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论