Calendar

完整月份日历，卡片与全屏两种形态，全屏可内联增删待办。

最后更新 2026-10-25 19:27:08

说明

Mode 取 card / fullscreen；全屏开启 Editable 后可在每个格子内联添加 / 删除待办，配合 @bind-Events 双向绑定 CalendarEvent 列表；DateCell 插槽自定义每格内容，点击标题在日期、月份、年份视图间逐级下钻，Min/Max 限定可选范围。

常见能力：

卡片 / 全屏
待办增删
年月日下钻
每日内容插槽
范围限制
今天定位

用法

<Calendar @bind-Value="@day" />

<Calendar Mode="fullscreen" Editable @bind-Value="@day" @bind-Events="@todos" />

API 参数

参数	类型	默认值	说明
`DateCell`	`RenderFragment<DateTime>`	`null`	全屏模式下每个日期格的内容插槽。
`Editable`	`bool`	`false`	全屏模式下是否在格子里内联增删待办（配合 Events 使用）。
`EventPlaceholder`	`string`	`"添加待办"`	内联添加输入框的占位文本。
`Events`	`List<CalendarEvent>`	`[]`	待办事项列表，可 @bind-Events 双向绑定。
`EventsChanged`	`EventCallback<List<CalendarEvent>>`	—	事件
`Max`	`DateTime?`	`null`	最大可选日期。
`Min`	`DateTime?`	`null`	最小可选日期。
`Mode`	`string`	`"card"`	形态：card（紧凑）/ fullscreen（全屏，每格可放自定义内容）。
`Value`	`DateTime?`	`null`	绑定值（DateTime?）。
`ValueChanged`	`EventCallback<DateTime?>`	—	事件
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。