React Big Calendar 使用教程

2026-01-17 08:50:22作者：邬祺芯Juliet

目录结构及介绍

React Big Calendar 项目的目录结构如下：

react-big-calendar/
├── .github/
├── examples/
├── lib/
├── src/
├── .gitignore
├── .npmignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json
├── vite.config.ts
├── yarn.lock

.github/: 包含 GitHub 相关的配置文件。
examples/: 包含示例代码。
lib/: 编译后的文件，用于发布到 npm。
src/: 源代码文件夹。
.gitignore: Git 忽略文件配置。
.npmignore: npm 忽略文件配置。
.prettierrc: Prettier 代码格式化配置。
CHANGELOG.md: 版本更新日志。
LICENSE: 项目许可证。
package.json: 项目依赖和脚本配置。
README.md: 项目说明文档。
tsconfig.json: TypeScript 配置文件。
vite.config.ts: Vite 配置文件。
yarn.lock: Yarn 依赖锁定文件。

项目的启动文件介绍

React Big Calendar 的启动文件主要是 examples/index.html，它是一个示例页面，展示了如何使用 React Big Calendar 组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Big Calendar Examples</title>
  <link rel="stylesheet" href="../lib/css/react-big-calendar.css">
</head>
<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>
</html>

<link rel="stylesheet" href="../lib/css/react-big-calendar.css">: 引入 React Big Calendar 的样式文件。
<div id="root"></div>: 这是 React 应用的挂载点。
<script src="index.js"></script>: 引入示例的 JavaScript 文件。

项目的配置文件介绍

React Big Calendar 的配置文件主要包括：

package.json: 项目依赖和脚本配置。

{
  "name": "react-big-calendar",
  "version": "0.33.0",
  "description": "gcal/outlook like calendar component",
  "main": "lib/index.js",
  "module": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {
    "start": "yarn storybook",
    "build": "rollup -c",
    "test": "jest",
    "lint": "eslint src",
    "prepublishOnly": "yarn build"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

scripts: 定义了项目的启动、构建、测试和 lint 脚本。
dependencies: 项目运行时的依赖。
devDependencies: 开发时的依赖。

vite.config.ts: Vite 配置文件。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

plugins: 配置 Vite 插件，如 React 插件。
build: 构建配置，包括输出目录和源映射。

tsconfig.json: TypeScript 配置文件。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "outDir": "./lib",
    "strict": true