日程 | Hammer

安装

npm install @chaos-design/calendar

使用方式

import "@chaos-design/calendar/dist/es/index.css";
import { Calendar } from "@chaos-design/calendar";

const initialDate = new Date();

export default function Demo() {
  return (
    <Calendar
      initialDate={initialDate}
      locale="zh"
      defaultView="month"
      events={[
        {
          id: "1",
          title: "每日站会",
          start: new Date(2026, 0, 31, 10, 0),
          end: new Date(2026, 0, 31, 10, 30),
          color: "bg-red-600",
          allDay: true,
        },
      ]}
    />
  );
}

在 shadcn/ui 中使用

安装依赖

npm install @chaos-design/calendar

在全局样式中引入日历样式

@import "@chaos-design/calendar/dist/es/index.css";

在组件中使用

import { Calendar } from "@chaos-design/calendar";

export default function Demo() {
  return <Calendar defaultView="month" locale="zh" />;
}

Props

属性	类型	默认值	说明
className	string	-	自定义类名。
classNames	CalendarClassNames	-	内部组件自定义类名。
events	CalendarEvent[]	-	受控事件列表。
defaultEvents	CalendarEvent[]	[]	非受控初始事件列表。
defaultView	"month" \| "week" \| "day"	"month"	初始视图。
weekStart	"sunday" \| "monday"	"monday"	一周起始日。
initialDate	Date	new Date()	初始聚焦日期。
onEventCreate	(event: CalendarEvent) => void	-	新建事件回调。
onEventUpdate	(event: CalendarEvent) => void	-	更新事件回调。
onEventDelete	(id: string) => void	-	删除事件回调。
theme	"light" \| "dark"	"light"	主题模式。
onThemeToggle	(next: "light" \| "dark") => void	-	主题切换回调。
categories	CalendarCategory[]	DEFAULT_CATEGORIES	分类列表。
locale	"en" \| "zh"	"en"	语言。
onLocaleChange	(next: "en" \| "zh") => void	-	语言切换回调。
themeConfig	ThemeConfig	DEFAULT_THEME	主题配置覆盖。

CalendarEvent

属性	类型	说明
id	string	事件唯一标识。
title	string	事件标题。
start	Date	开始时间。
end	Date	结束时间。
color	string	事件颜色 (Tailwind class 或 Hex)。
allDay	boolean	是否为全天事件。
description	string	事件描述 (可选)。
category	string	事件分类 ID (可选)。

CalendarClassNames

属性	类型	说明
container	string	根容器。
header	string	头部区域。
monthView	string	月视图容器。
weekView	string	周视图容器。
dayView	string	日视图容器。
eventModal	string	事件弹窗。
eventPopover	string	事件气泡。
inlineEditor	string	内联编辑器。

日程

安装

使用方式

在 shadcn/ui 中使用

Props

CalendarEvent

CalendarClassNames

On this page