跳到正文
浏览文档

Calendar

位于带边框卡片中的月视图,带有月份与年份选择器。

示例可交互
Calendar — Avalonia UIKit
Live demo unavailable
<Calendar SelectedDate="2025-03-14" DisplayDate="2025-03-14" HorizontalAlignment="Left" />

用法

主题覆盖 Calendar 及其 CalendarItem、CalendarDayButton 与 CalendarButton:带 12px 内边距的带边框卡片,包含上一月与下一月按钮、两者之间是月份与年份的表头,弱化的星期标题,以及日期。SelectedDate 与 DisplayDate 是 Avalonia 的属性;FirstDayOfWeek 让一周从另一天开始,SelectionMode 允许选择范围。今天始终用强调色标记;请保持 IsTodayHighlighted 开启。

日期状态:本月之外的日期弱化,今天是强调色,悬停的日期为 UIKit.SecondaryHover,选中的日期为主色,blackout 日期以一半强度弱化且没有悬停效果。DisplayMode="Year" 以三列完整月份名显示月份网格,选中的月份为主色;Avalonia 的表头表现为一个按钮。

样式类单元格宽度
small28px220px
(medium)32px248px
large40px304px

若需要并排的多个月份、范围、禁用的星期或年份网格,请使用 uikit:CalendarView。

示例

small 与 large 尺寸的日历。

尺寸可交互
Live demo unavailable
<WrapPanel ItemSpacing="16" LineSpacing="16">
  <Calendar Classes="small" SelectedDate="2025-03-14" DisplayDate="2025-03-14" VerticalAlignment="Top" />
  <Calendar Classes="large" SelectedDate="2025-03-14" DisplayDate="2025-03-14" VerticalAlignment="Top" />
</WrapPanel>

DisplayMode="Year" 所显示的月份网格。

年份视图可交互
Live demo unavailable
<Calendar DisplayMode="Year" SelectedDate="2025-03-14" DisplayDate="2025-03-14" HorizontalAlignment="Left" />

FirstDayOfWeek="Monday" 会重排星期标题与网格。

每周第一天可交互
Live demo unavailable
<Calendar FirstDayOfWeek="Monday" SelectedDate="2025-03-14" DisplayDate="2025-03-14" HorizontalAlignment="Left" />