Why won't my calendar change to the week view when I click on that section?
https://i.stack.imgur.com/gh2aO.png
In the screenshot above, my default view is set to month, but when I attempt to switch to week, it only highlights the option without changing the calendar structure.
https://i.stack.imgur.com/AF7bs.png
"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"
}
}
I am using Next.js with Tailwind CSS for this project.
CodeSandbox: https://codesandbox.io/p/sandbox/jovial-leftpad-ydxp3m?file=%2Fapp%2Fpage.tsx%3A41%2C11