Appearance

WeekCalendar 周日历 ​

介绍 ​

周日历组件，以周为单位展示日期，支持左右滑动切换周，适用于日程、打卡等按周查看的场景。

引入 ​

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

类型说明

TnWeekCalendarCustomData -- 自定义日期数据

属性说明类型
day日期（几号）number
text显示文案string
color文案颜色（可选）string

TnWeekCalendarChangeData -- 日期变化回调参数

属性说明类型
year年份number
month月份number
day日期number
dayOfWeek星期几（0-6，0 为周日）number

代码演示 ​

基础用法 ​

通过 modelValue 绑定选中的日期，year 和 month 指定当前显示的年月。

基础用法

点我查看代码
typescript
@Local selectedDay: number = 14;
@Local currentYear: number = 2026;
@Local currentMonth: number = 3;

TnWeekCalendar({
  modelValue: this.selectedDay,
  year: this.currentYear,
  month: this.currentMonth,
  onChange: (data: TnWeekCalendarChangeData) => {
    this.selectedDay = data.day;
    this.currentYear = data.year;
    this.currentMonth = data.month;
  },
})

自定义数据 ​

通过 customData 属性为指定日期添加额外的文案展示，例如打卡记录、日程提示等。

点我查看代码
typescript
@Local selectedDay: number = 14;
@Local currentYear: number = 2026;
@Local currentMonth: number = 3;

const customData: TnWeekCalendarCustomData[] = [
  { day: 10, text: "休", color: "#FF6B6B" },
  { day: 12, text: "班" },
  { day: 14, text: "今" },
  { day: 18, text: "约" },
];

TnWeekCalendar({
  modelValue: this.selectedDay,
  year: this.currentYear,
  month: this.currentMonth,
  customData: customData,
  onChange: (data: TnWeekCalendarChangeData) => {
    this.selectedDay = data.day;
    this.currentYear = data.year;
    this.currentMonth = data.month;
  },
})

日期范围 ​

通过 minDate 和 maxDate 属性限制可选的日期范围。

点我查看代码
typescript
@Local selectedDay: number = 14;
@Local currentYear: number = 2026;
@Local currentMonth: number = 3;

TnWeekCalendar({
  modelValue: this.selectedDay,
  year: this.currentYear,
  month: this.currentMonth,
  minDate: 5,
  maxDate: 25,
  onChange: (data: TnWeekCalendarChangeData) => {
    this.selectedDay = data.day;
    this.currentYear = data.year;
    this.currentMonth = data.month;
  },
})

自定义颜色 ​

通过 activeBgColor 和 activeTextColor 自定义选中日期的样式。

自定义颜色

点我查看代码
typescript
@Local selectedDay: number = 14;
@Local currentYear: number = 2026;
@Local currentMonth: number = 3;

TnWeekCalendar({
  modelValue: this.selectedDay,
  year: this.currentYear,
  month: this.currentMonth,
  activeBgColor: "#FF6B6B",
  activeTextColor: "#FFFFFF",
  onChange: (data: TnWeekCalendarChangeData) => {
    this.selectedDay = data.day;
    this.currentYear = data.year;
    this.currentMonth = data.month;
  },
})

API ​

Props ​

参数说明类型默认值
modelValue选中的日期（几号）number-
year当前年份number-
month当前月份number-
activeBgColor选中日期的背景色string-
activeTextColor选中日期的文字色string-
minDate可选的最小日期number-
maxDate可选的最大日期number-
customData自定义日期数据TnWeekCalendarCustomData[]-

Events ​

事件名说明回调参数
onChange选中日期变化时触发(data: TnWeekCalendarChangeData) => void
onWeekChange切换周时触发(weekStart: string) => void