Calendar

日历家族：EventTag / CalendarDayCell / EventCard / SmallCalendar / FullCalendar。

EventTag

日历事件标签。7 色 × 2 variant × 2 size。

Import

import {
  EventTag, CalendarDayCell, EventCard,
  SmallCalendar, FullCalendar,
} from "@forge-ui/react";

Usage

Meeting TitleReview

1<EventTag label="Meeting Title" color="purple" />
2<EventTag label="Review" color="green" variant="outline" />

API

Attribute	Type	Default	Description
`label`	`string`	`—`	事件文案。
`color`	`'purple' \| 'green' \| 'red' \| 'yellow' \| 'blue' \| 'cyan' \| 'orange'`	`'purple'`	7 种事件色。
`variant`	`'solid' \| 'outline'`	`'solid'`	实底 / 描边。
`size`	`'sm' \| 'md'`	`'md'`	尺寸。
`avatar`	`string`	`—`	文案前小头像 URL。
`block`	`boolean`	`false`	块级 flex（填满父容器宽度）。

CalendarDayCell

月视图里的单元格。含今日 / 选中 / 非本月三态 + 事件 tag 列表 + +N More。

Usage

events 数组超过 maxVisible 自动折叠为 +N。

Standup

1:1

1<CalendarDayCell
2  day={17}
3  isToday
4  events={[
5    { label: "Standup", color: "purple", avatar },
6    { label: "1:1", color: "blue", avatar },
7  ]}
8/>

API

Attribute	Type	Default	Description
`day`	`number`	`—`	日期数字。
`isToday / isSelected / isOtherMonth`	`boolean`	`false`	三个互斥态：今日圆点 / 选中浅底 / 非本月斜纹背景。
`events`	`{ label, color, avatar? }[]`	`[]`	当日事件列表（EventTag 风格）。
`maxVisible`	`number`	`3`	最多显示几个 tag 后折叠为 +N More。
`moreAvatar`	`string`	`—`	+N More 行的头像。

EventCard

独立事件卡。标题 + 时间段 + 头像组 + 底部彩色强调条。8 色。

Usage

Design Check-In

10:00-11:00

1<EventCard
2  title="Design Check-In"
3  timeRange="10:00-11:00"
4  color="purple"
5  avatars={[a1, a2, a3]}
6  overflowCount={6}
7/>

API

Attribute	Type	Default	Description
`title`	`string`	`—`	事件标题。
`timeRange`	`string`	`—`	时间段文案（如 10:00-11:00）。
`color`	`purple \| blue \| black \| red \| yellow \| green \| cyan \| orange`	`'purple'`	底部强调条颜色（8 色）。
`avatars`	`string[]`	`[]`	参与者头像 URL 数组。
`overflowCount`	`number`	`—`	末尾 +N 数字。

SmallCalendar

紧凑月日历卡。月份导航 + 日期网格 + 选中日事件列表。3 主色。

Usage

CalendarUpcoming

April2026

SuMoTuWeThFrSa

27 April 2026No events

1<SmallCalendar
2  title="Calendar"
3  subtitle="Upcoming"
4  color="purple"
5  events={events}
6/>

API

Attribute	Type	Default	Description
`title / subtitle`	`string`	`'Calendar' / 'Text Here'`	卡片顶部文案。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	today 圆点与列表条的主色。
`events`	`SmallCalendarEvent[]`	`[]`	事件数组，day / title / timeRange / color / avatars / overflowCount。
`onMenuClick`	`() => void`	`—`	右上 menu 按钮回调。

FullCalendar

完整日历容器。3 view（month / week / day）× 3 色 × 可选 detail 浮层。

Usage

view 受控从外部驱动，下面展示 month 视图。其余见 cases。

April 2026

Month

SUN

MON

TUE

WED

THU

FRI

SAT

Meeting

Sprint

Review

1:1

1<FullCalendar view="month" color="purple" events={events} />

API

Attribute	Type	Default	Description
`view`	`'month' \| 'week' \| 'day'`	`'month'`	日历视图。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	today / header 主色。
`year / month / day`	`number`	`today`	初始时间，后续由组件内部管理。
`events`	`CalendarEvent[]`	`[]`	事件数组（day / label / color / avatar? / hour?）。
`detailPanel`	`ReactNode`	`—`	右侧浮层详情，传了才显示。
`onCloseDetail`	`() => void`	`—`	关闭浮层回调。

看所有变体 →