安装
安装 Hammer 提供的组件与工具包。
最后更新：2026/10/02 14:09:52
环境要求
- Node.js 20 及以上
- React 18 或 19
安装组件
Hammer 的组件通过 npm 正常发布，直接安装即可使用，无需额外配置。
pnpm add @chaos-design/calendarnpm install @chaos-design/calendaryarn add @chaos-design/calendarbun add @chaos-design/calendar把包名替换成你要安装的组件即可：
可用组件
@chaos-design/calendar、@chaos-design/color-picker、
@chaos-design/month-datepicker
安装工具包
如果你使用的是本仓库的 monorepo 工具链：
pnpm add -D @chaos-design/tsconfignpm install -D @chaos-design/tsconfigyarn add -D @chaos-design/tsconfig引入样式
带样式的组件需要在应用入口引入其 CSS：
import '@chaos-design/calendar/dist/es/index.css';在 app/layout.tsx 中引入：
import '@chaos-design/calendar/dist/es/index.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="zh">
<body>{children}</body>
</html>
);
}在 main.tsx 中引入：
import '@chaos-design/calendar/dist/es/index.css';使用组件
在 React 应用中导入并渲染：
import '@chaos-design/calendar/dist/es/index.css';
import { Calendar } from '@chaos-design/calendar';
export default function App() {
return (
<Calendar
defaultView="month"
locale="zh"
events={[
{
id: '1',
title: '每日站会',
start: new Date(2026, 0, 5, 10, 0),
end: new Date(2026, 0, 5, 10, 30),
},
]}
/>
);
}客户端组件
Calendar、ColorPicker 与 MonthDatepicker 都使用了 React hooks，
需要渲染在客户端。在 Next.js App Router 中使用时，请确保外层已标记
'use client'，或自行封装一层客户端组件。