为什么当我尝试单击以下部分时，我的日历没有更改。

的数据
所以在上图中，我的default view是month，但当我试图单击week时，它只是突出显示，但日历结构没有改变。

的

"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); // State to manage dialog visibility

  const openDialog = () => {
    setDialogOpen(true);
  };

  const closeDialog = () => {
    setDialogOpen(false);
  };

  const handleSelect = (slotInfo: any) => {
    // Handle date selection
    openDialog(); // Open the dialog when a date is selected
  };

  //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">
              {/* if there is a button, it will close the modal */}
              <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"
  }
}

型
我正在使用nextjs+taiwlind
CodeSandbox：https://codesandbox.io/p/sandbox/jovial-leftpad-ydxp3m?file=%2Fapp%2Fpage.tsx%3A41%2C11