API 参考

这里是 calendar 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 17 个输入项精细调校 calendar。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`variant`	`string`	`undefined`	语义强调色，作用于今天与选中日期、当前视图按钮和事件标签：primary、secondary、success、danger、warning、info、neutral、light、dark，或任意自定义名称（读取 --hub-sys-color-<variant>）。
`events`	`CalendarEvent<T>[]`	`[]`	要在日历上显示的事件数组
`view`	`'month' \| 'week' \| 'day' \| 'year'`	`'month'`	当前视图类型（与 viewChange 双向绑定）
`selectedDate`	`Date`	`new Date()`	当前聚焦的日期（与 selectedDateChange 双向绑定）
`config`	`CalendarConfig`	`{}`	日历的配置选项
`eventClass`	`string \| ((event: CalendarEvent) => string)`	`undefined`	应用于事件的 CSS 类，可以是静态或动态的
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`undefined`	一周的起始日（0 = 周日，1 = 周一，依此类推）。设置后优先于 config.weekStartsOn；未设置时由配置决定，其默认值为 0。
`locale`	`string`	`'en'`	内置词典的语言代码。库自带英语和西班牙语；其他代码回退到英语。
`height`	`number \| string`	`undefined`	日历的高度，也决定它是滚动还是自然增高。数字按像素读取，可用任意 CSS 长度，`auto` 则随内容增高而不滚动。不设置时日历填满其容器。比写样式规则更可靠：带作用域的 `hub-calendar { … }` 选择器会压过组件自身的布局并可能破坏它。
`displayFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	页眉标题如何书写月份与年份。可传 Intl 选项、`MMMM yyyy` 这样的 Angular 日期模式，或一个函数。不设置时使用内置组合；年视图的标题指的是年份，因此不受影响。
`timeDisplayFormat`	`Intl.DateTimeFormatOptions`	`{ hour: 'numeric', minute: '2-digit' }`	事件条与当日提示中时间的 Intl 选项，会与 `hourFormat` 合成。默认是小时与分钟。
`eventTimeFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	月视图事件条在定时事件前打印的时间。不设置时保留为窄单元格准备的缩写：分钟为零时省略。
`slotLabelFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	周视图与日视图小时标尺上的标签。不设置时仍是一直以来的 `9:00`；只要设置 `hourFormat` 就会变成真正的时钟。
`hourFormat`	`'12' \| '24'`	`undefined`	在日历书写时间的所有位置强制 12 小时制或 24 小时制。不设置时由语言决定——与 `hub-datepicker` 中的含义相同。
`weekdayFormat`	`'short' \| 'narrow' \| 'long'`	`'short' ('narrow' when compact)`	星期列表头的宽度。`short` 与 `long` 读取日历自身的词典，因此应用词典能够生效；`narrow` 在词典中没有条目，改由区域设置推导。
`monthFormat`	`'short' \| 'long'`	`'long'`	月份在页眉标题与年视图卡片上的写法。默认为 `long`，也就是日历一直以来打印的形式。
`compact`	`boolean`	`false`	把日历画成迷你月历：工具栏消失，日和周的最小高度也消失，星期表头收缩为语言本身的缩写，有事件的日子以圆点代替色块。月份标题保留。经 `booleanAttribute` 转换，因此只写 `compact` 属性即可开启。

输出

响应 calendar 的行为——有 6 个事件可供你挂接逻辑。

名称	类型	描述
`eventClick`	`CalendarEvent<T>`	当事件被点击时触发
`dayClick`	`CalendarDay<T>`	当日期单元格被点击时触发
`eventDrop`	`{ event: CalendarEvent<T>; newDate: Date; previousDate: Date }`	当事件被拖放到不同日期时触发
`viewChange`	`CalendarViewType`	当视图类型变化时触发
`selectedDateChange`	`Date`	所选日期变化时发出；支持通过 [(selectedDate)] 进行双向绑定
`dateChange`	`Date`	当导航改变所显示的日期时触发

模板

打造你自己的样式——2 个模板插槽让你可以投影自定义标记。

名称	描述	示例
`eventTpt`	用于渲染单个事件的模板。上下文：{ event: CalendarEvent }	`<ng-template eventTpt let-event="event">{{ event.title }}</ng-template>`
`dayCellTpt`	用于自定义日期单元格渲染的模板。上下文：{ day: CalendarDay }	`<ng-template dayCellTpt let-day="day">{{ day.date \| date }}</ng-template>`