React Big Calendar在NextJS中显示异常求助：样式错乱无正常日历

问题描述 #

使用create-next-app创建NextJS项目，集成React Big Calendar后，日历样式混乱、日期显示错乱，无法呈现正常的日历布局。

核心问题分析 #

1. 未导入组件官方样式文件 #

React Big Calendar依赖自身自带的CSS样式来实现正常布局，你的代码完全没有引入这部分样式，导致组件缺失基础样式支撑，出现布局混乱。

2. events 变量赋值错误 #

代码中const events = useState([])是错误写法：useState返回的是包含状态值和更新函数的数组，直接把这个完整数组传给<Calendar>的events属性，会导致组件无法正确解析事件数据，进而引发渲染异常。

修复步骤 #

第一步：导入React Big Calendar的官方样式 #

在页面文件顶部添加样式导入语句：

// 导入组件基础样式
import 'react-big-calendar/lib/css/react-big-calendar.css';

第二步：修正events变量的写法 #

解构useState的返回值，只取状态值部分：

// 正确获取状态值
const [events] = useState([]);

修复后的完整代码 #

"use client";

import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
// 新增：导入官方样式
import 'react-big-calendar/lib/css/react-big-calendar.css';
import styles from "./page.module.css";

const localizer = momentLocalizer(moment);

export default function MyCalendar() {
    // 修正：解构useState返回的状态值
    const [events] = useState([]);
    return (
        <div className={styles.container}>
            <Calendar
                localizer={localizer}
                events={events}
                startAccessor="start"
                endAccessor="end"
            />
        </div>
    );
}

可选优化 #

如果需要让日历更适配容器空间，可以给<Calendar>添加内联样式：

<Calendar
    // 保留原有属性
    style={{ height: '80vh', width: '90vw' }}
/>

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