Calendar 日历

显示日期；按照日历的形式展示数据的容器

引用

import { regist, Calendar } from "litos-ui";

regist(Calendar);

演示

基础用法

渲染 year、month 渲染指定年月的日历。默认为当前年月。

限制可选日期

通过 min-date、max-date 属性可以限制可选日期的范围。

日期切换

通过监听 day-click 事件来获取点击的日期，并实现点击上一月、下一月日期时，切换日期

选中日期

通过 type=select 然后设置 value 属性，可以选中指定的日期。

value 的值通过 & 分隔实现选择多个日期

范围选择

通过 type=range 然后设置 value 属性为一个 number,number 格式的值，可以选中的日期范围。

API

Calendar Attibutes

参数	说明	类型	默认值
min-date	最小日期, 例如: 2026-04-03	string	-
max-date	最大日期, 例如: 2026-04-03	string	-
year	年份, 例如: 2026	number	当前年份
month	月份, 例如: 4	number	当前月份
type	日历类型，可选值 select、range	string	select
value	选中日期，当 type 为 select 时为选中日期字符串以 &，当 type 为 range 时为两个日期的组合字符串（逗号分隔）; 同时也是 value 属性	string	-
locale	语言	string	zh-CN

Calendar Slots

名称	说明
default	内容

Calendar Events

事件名	说明	回调参数
click	点击按钮时触发	(event: Event)
day-click	点击日期时触发	(detail: {isActiveMonth: boolean, day: string, dayTimestamp: number})
day-hover	鼠标悬停日期时触发	(detail: {isActiveMonth: boolean, day: string, dayTimestamp: number})

Calendar CSS Variables

变量名	说明	默认值
--calendar-header-height	周信息栏高度	auto
--l-calendar-off-text-color	当日期不是当前年月时的文字颜色	#a8abb2