Integrate a given React compon…

# react-big-calendar 集成指南（shadcn + Tailwind + TS）

一、安装依赖

• npm install react-big-calendar date-fns（选 date-fns 本地化器，与 shadcn 生态常用库一致）
• npm install -D @types/react-big-calendar
• 引入基础样式：import 'react-big-calendar/lib/css/react-big-calendar.css'

二、中文本地化

```tsx

import { dateFnsLocalizer } from 'react-big-calendar';

import { format, parse, startOfWeek, getDay } from 'date-fns';

import { zhCN } from 'date-fns/locale';

const localizer = dateFnsLocalizer({

format, parse, startOfWeek: (d) => startOfWeek(d, { locale: zhCN }),

getDay, locales: { 'zh-CN': zhCN },

});

// 关键文案映射（组件不自动翻译）

const messages = {

today: '今天', previous: '上一月', next: '下一月',

month: '月', week: '周', day: '日', agenda: '列表',

date: '日期', time: '时间', event: '事件',

noEventsInRange: '该时间段暂无事件',

};

<Calendar localizer={localizer} culture="zh-CN" messages={messages} />

```

三、暗黑模式适配

react-big-calendar 用自有 CSS，不吃 Tailwind 变量，需覆盖。思路：用 CSS 变量桥接 shadcn 主题。

1. 在 globals.css 定义（.dark 下变量自动切换）：

```css

.rbc-calendar {

--rbc-base-bg: hsl(var(--card));

--rbc-border-color: hsl(var(--border));

--rbc-today-bg: hsl(var(--accent));

background: var(--rbc-base-bg);

color: hsl(var(--foreground));

}

.rbc-month-view, .rbc-header, .rbc-day-bg, .rbc-time-view {

border-color: var(--rbc-border-color);

}

.rbc-today { background: var(--rbc-today-bg); }

.rbc-off-range-bg { background: hsl(var(--muted) / 0.5); }

.rbc-toolbar button { /* 套用 shadcn Button 风格 */ }

```

2. .dark 下 shadcn 变量（--card、--border 等）已自动变暗，无需额外处理。

3. 也可用 @tailwindcss 的 dark: 变体直接写覆盖类，二选一即可。

四、TypeScript 类型

• 事件对