Tea Design

Appearance

日历 Calendar ​

6月31号请我吃饭？尊嘟假嘟 o.O

展示和查看日期信息的轻量级组件

基础用法 ​

通过lang属性进行中英文切换

2026年4月<今日>
日
一
二
三
四
五
六
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
April 2026<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
展开查看
vue
<template>
    <t-calendar />
    <t-calendar lang="en" />
</template>

头部样式 ​

通过headerMode属性设置不同的头部样式

2026年4月<今日>
日
一
二
三
四
五
六
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
<2026年4月>
日
一
二
三
四
五
六
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
<<<2026年4月>>>
日
一
二
三
四
五
六
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
2026年4月
日
一
二
三
四
五
六
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
展开查看
vue
<template>
    <t-calendar headerMode="today-between" />
    <t-calendar headerMode="month-center" />
    <t-calendar headerMode="year-month-center" />
    <t-calendar headerMode="simple-center" />
</template>

周一优先 ​

经过不严谨调查，还是会有人习惯周一排在最左列

通过mondayFirst属性设置日历周一优先

2026年4月<今日>
一
二
三
四
五
六
日
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
April 2026<today>
Mon
Tue
Wed
Thu
Fri
Sat
Sun
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
展开查看
vue
<template>
    <t-calendar lang="zh" mondayFirst />
    <t-calendar lang="en" mondayFirst />
</template>

尺寸 ​

通过size属性设置不同的尺寸

April 2026<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
April 2026<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
April 2026<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
Apr 2026<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
展开查看
vue
<template>
    <t-calendar lang="en" size="large" />
    <t-calendar lang="en" size="medium" />
    <t-calendar lang="en" size="small" />
    <t-calendar lang="en" size="mini" />
</template>

颜色 ​

通过theme属性设置不同的颜色

2026年4月<今日>
日
一
二
三
四
五
六
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
2026年4月<今日>
日
一
二
三
四
五
六
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
展开查看
vue
<template>
    <t-calendar theme="info" />
    <t-calendar theme="wine" />
</template>

相关属性 ​

属性名说明类型默认值
lang显示语言'zh' | 'en''zh'
headerMode头部样式'today-between' | 'month-center' | 'year-month-center' | 'simple-center''today-between'
size尺寸'large' | 'medium' | 'small' | 'mini''medium'
theme颜色主题'tea' | 'info' | 'wine''tea'
mondayFirst周一优先Booleanfalse

Copyright © 2023-present Teashirt