React.js中Big Calendar本地化配置及示例代码报错排查

Hey there, let's tackle your two questions one by one—first figuring out why that official example is throwing errors in your fresh Create React App, then walking through how to set up localization for Big Calendar.

The most common culprits for errors when using the base Big Calendar example in a new CRA are usually missing dependencies, forgotten styles, or version mismatches:

1. Missing Required Peer Dependencies #

Big Calendar relies on a date utility library (like date-fns, moment, or luxon) to handle date parsing, formatting, and localization. Create React App doesn't install these automatically, so if you only installed react-big-calendar without one of these, you'll get module-not-found errors.

Fix: Install react-big-calendar along with your preferred date library. For the official example (which uses date-fns), run:

npm install react-big-calendar date-fns
# Or with Yarn:
yarn add react-big-calendar date-fns

2. Forgotten Styles Import #

The official example assumes you've imported Big Calendar's core CSS file, but it's easy to overlook this step. Without the CSS, you'll get broken layout rendering (or even unexpected runtime errors related to missing style classes).

Fix: Add this import at the top of your App.js file:

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

3. React Version Incompatibility #

Newer versions of react-big-calendar (v10.0.0+) require React 16.8.0 or higher (since they use hooks). If your CRA setup is outdated and uses an older React version, you'll run into compatibility issues.

Fix: Upgrade your React and React DOM packages:

npm install react@latest react-dom@latest
# Or with Yarn:
yarn add react@latest react-dom@latest

Once you fix these three issues, the official base example should render without errors.

Let's use date-fns (the recommended library for modern Big Calendar setups) to configure localization—we'll use Chinese as an example, but this works for any supported locale:

1. Import the Target Locale #

First, import the locale file from date-fns. For Chinese (Simplified), add this to your App.js:

import zhCN from 'date-fns/locale/zh-CN';

2. Update the Localizer Configuration #

Modify your locales object to include the new locale, then set it as the default (or specify it directly on the Calendar component):

// Update the locales object
const locales = {
  'zh-CN': zhCN,
  'en-US': require('date-fns/locale/en-US'), // Keep English if needed
};

// Initialize the localizer with default locale
const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
  defaultLocale: 'zh-CN', // Sets Chinese as the default
});

Alternatively, you can override the locale per Calendar component by adding the locale prop:

<Calendar
  localizer={localizer}
  events={events}
  startAccessor="start"
  endAccessor="end"
  locale="zh-CN" // Forces Chinese for this instance
/>

3. Test It Out #

Run your app again—you should see the calendar's month names, day abbreviations, and other text rendered in Chinese.

If you prefer using moment.js instead, the process is similar: install moment, import the locale file (e.g., moment/locale/zh-cn), call moment.locale('zh-cn'), and use the momentLocalizer instead of dateFnsLocalizer.

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