react-big-calendar点击日/周/月视图仅高亮不切换问题求助

在Next.js 13.5.4 + Tailwind项目中使用react-big-calendar@1.6.8时，出现视图切换异常：默认视图为month，点击week或day选项仅会高亮选中项，但日历的显示结构完全没有变化。

问题截图 #

相关代码 #

组件代码（Schedules.tsx） #

"use client";

import React, { useState } from "react";
import {
  Calendar as BigCalendar,
  CalendarProps,
  momentLocalizer,
} from "react-big-calendar";
import moment from "moment";

const localizer = momentLocalizer(moment);

const Schedules = (props: Omit<CalendarProps, "localizer">) => {
  const [isDialogOpen, setDialogOpen] = useState(false);

  //Dates
  const today = new Date();
  const minDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate(),
    8
  );
  const maxDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate(),
    17
  );

  return (
    <div className="max-container padding-container h-[calc(100vh-15vh)] ">
      <BigCalendar
        className="p-4 shadow-2xl rounded-lg bg-slate-50 border-2 border-gray-20"
        selectable
        localizer={localizer}
        views={['day','week','month']}
        min={minDate}
        max={maxDate}
        onSelectSlot={() => {
          const modal = document.getElementById("my_modal_4") as HTMLDialogElement;
          if (modal) {
            modal.show();
          }}}
      />
      <dialog id="my_modal_4" className="modal">
        <div className="modal-box h-full w-full max-w-5xl">
          <h3 className="font-bold text-lg">Hello!</h3>
          <p className="py-4">Click the button below to close</p>
          <div className="modal-action">
            <form method="dialog">
              <button className="btn">Close</button>
            </form>
          </div>
        </div>
      </dialog>
    </div>
  );
};

export default Schedules;

package.json配置 #

{
  "name": "sched",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/lab": "^5.0.0-alpha.148",
    "@mui/material": "^5.14.13",
    "@types/react-big-calendar": "^1.8.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "moment": "^2.29.4",
    "next": "13.5.4",
    "react": "^18",
    "react-big-calendar": "^1.6.8",
    "react-dom": "^18",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

修复方案 #

1. 引入react-big-calendar官方样式 #

react-big-calendar的不同视图结构依赖官方提供的CSS样式，缺少样式会导致视图切换后无法正常渲染。在组件顶部添加样式引入：

import 'react-big-calendar/lib/css/react-big-calendar.css';

2. 用受控模式管理视图状态 #

在Next.js客户端组件环境中，react-big-calendar的非受控视图状态可能无法触发组件重渲染，需要手动维护视图状态：

• 添加视图状态变量
• 绑定view属性和onViewChange回调

修改后的核心代码片段：

// ...其他导入
import 'react-big-calendar/lib/css/react-big-calendar.css';

const Schedules = (props: Omit<CalendarProps, "localizer">) => {
  // 新增：管理当前视图状态
  const [currentView, setCurrentView] = useState<'day' | 'week' | 'month'>('month');
  // ...其他状态

  return (
    <div className="max-container padding-container h-[calc(100vh-15vh)] ">
      <BigCalendar
        className="p-4 shadow-2xl rounded-lg bg-slate-50 border-2 border-gray-20"
        selectable
        localizer={localizer}
        views={['day','week','month']}
        // 绑定受控视图属性
        view={currentView}
        onViewChange={setCurrentView}
        min={minDate}
        max={maxDate}
        onSelectSlot={() => {
          const modal = document.getElementById("my_modal_4") as HTMLDialogElement;
          if (modal) {
            modal.show();
          }}}
      />
      // ...模态框代码
    </div>
  );
};

完成以上两步修改后，点击视图切换按钮时，日历会正确渲染对应视图的结构。

内容的提问来源于stack exchange，提问作者Stykgwar