Appearance

Calendar 日历 ​

介绍 ​

日历组件，支持单选、多选和范围选择，可显示农历、周末颜色和法定节假日标注。

引入 ​

typescript
import { TnCalendar } from "@tuniao/tn-ui";

代码演示 ​

基础用法（单选） ​

默认模式为 date，点击日期即可选中。通过 modelValue 绑定选中的日期字符串。

基础用法

点我查看代码
typescript
@Local selectedDate: string = "2026-03-14";

TnCalendar({
  modelValue: this.selectedDate,
  onChange: (value: string | string[]) => {
    this.selectedDate = value as string;
  },
})

多选模式 ​

通过 mode 设置为 multi，可同时选择多个日期。modelValue 类型为 string[]。

多选模式

点我查看代码
typescript
@Local selectedDates: string[] = ["2026-03-12", "2026-03-20"];

TnCalendar({
  modelValue: this.selectedDates,
  mode: "multi",
  onChange: (value: string | string[]) => {
    this.selectedDates = value as string[];
  },
})

范围选择 ​

通过 mode 设置为 range，选择一个日期范围。可通过 rangeStartDesc 和 rangeEndDesc 自定义起止文案。

范围选择

点我查看代码
typescript
@Local dateRange: string[] = ["2026-03-03", "2026-03-20"];

TnCalendar({
  modelValue: this.dateRange,
  mode: "range",
  rangeStartDesc: "开始",
  rangeEndDesc: "结束",
  onChange: (value: string | string[]) => {
    this.dateRange = value as string[];
  },
})

农历显示 ​

通过 showLunar 属性开启农历显示。

农历显示

点我查看代码
typescript
@Local selectedDate: string = "";

TnCalendar({
  modelValue: this.selectedDate,
  showLunar: true,
  onChange: (value: string | string[]) => {
    this.selectedDate = value as string;
  },
})

周末颜色 ​

通过 showWeekendColor 属性为周末日期添加颜色区分。

周末颜色

点我查看代码
typescript
@Local selectedDate: string = "";

TnCalendar({
  modelValue: this.selectedDate,
  showWeekendColor: true,
  onChange: (value: string | string[]) => {
    this.selectedDate = value as string;
  },
})

法定节假日 ​

通过 holidays 属性传入节假日数据，在日历中标注假期和调休。

法定节假日

点我查看代码
typescript
@Local selectedDate: string = "2026-03-14";

const holidays: TnCalendarHolidayItem[] = [
  // 清明节
  { date: "2026-04-04", type: "holiday" },
  { date: "2026-04-05", type: "holiday" },
  { date: "2026-04-06", type: "holiday" },
  // 劳动节
  { date: "2026-05-01", type: "holiday" },
  { date: "2026-05-02", type: "holiday" },
  { date: "2026-05-03", type: "holiday" },
  { date: "2026-05-04", type: "holiday" },
  { date: "2026-05-05", type: "holiday" },
  // 补班
  { date: "2026-04-26", type: "workday" },
  { date: "2026-05-09", type: "workday" }
];

TnCalendar({
  modelValue: this.selectedDate,
  holidays: holidays,
  onChange: (value: string | string[]) => {
    this.selectedDate = value as string;
  },
})

自定义颜色 ​

通过 activeBgColor、activeTextColor、rangeBgColor、rangeTextColor 自定义选中态样式。

自定义颜色

点我查看代码
typescript
@Local dateRange: string[] = ["2026-03-11"];

TnCalendar({
  modelValue: this.dateRange,
  mode: "date",
  activeBgColor: "#ff6700",
  activeTextColor: "#FFFFFF",
  //rangeBgColor: "#FFE0E0",
  //rangeTextColor: "#FF6B6B",
  onChange: (value: string | string[]) => {
    this.dateRange = value as string[];
  },
})

日期范围限制 ​

通过 minDate 和 maxDate 属性限制可选的日期范围，格式为 YYYY-MM-DD。

点我查看代码
typescript
@Local selectedDate: string = "2026-03-14";

TnCalendar({
  modelValue: this.selectedDate,
  minDate: "2026-03-01",
  maxDate: "2026-03-31",
  onChange: (value: string | string[]) => {
    this.selectedDate = value as string;
  },
})

API ​

Props ​

参数说明类型默认值
modelValue选中的日期值string | string[]-
mode选择模式"date" | "multi" | "range""date"
minDate可选的最小日期，格式 YYYY-MM-DDstring-
maxDate可选的最大日期，格式 YYYY-MM-DDstring-
allowChangeYear是否允许切换年份booleantrue
allowChangeMonth是否允许切换月份booleantrue
activeBgColor选中日期的背景色string-
activeTextColor选中日期的文字色string-
rangeBgColor范围内日期的背景色string-
rangeTextColor范围内日期的文字色string-
rangeStartDesc范围起始日期的描述文案string"开始"
rangeEndDesc范围结束日期的描述文案string"结束"
showLunar是否显示农历booleanfalse
showWeekendColor是否为周末日期显示颜色booleanfalse
holidays法定节假日数据TnCalendarHolidayItem[]-

TnCalendarHolidayItem ​

属性说明类型
date日期，格式 YYYY-MM-DDstring
type节假日类型TnCalendarHolidayType

TnCalendarHolidayType ​

typescript
type TnCalendarHolidayType = "holiday" | "workday";
  • "holiday" -- 法定假日
  • "workday" -- 补班日（调休）

Events ​

事件名说明回调参数
onChange选中日期变化时触发(value: string | string[]) => void
onChangeYear切换年份时触发(year: number) => void
onChangeMonth切换月份时触发(month: number) => void