Tea Design

Appearance

日历 Calendar ​

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

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

基础用法 ​

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

2025年7月<今日>
日
一
二
三
四
五
六
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
July 2025<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
展开查看
vue
<template>
    <t-calendar />
    <t-calendar lang="en" />
</template>

头部样式 ​

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

2025年7月<今日>
日
一
二
三
四
五
六
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
<2025年7月>
日
一
二
三
四
五
六
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
<<<2025年7月>>>
日
一
二
三
四
五
六
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
2025年7月
日
一
二
三
四
五
六
293012345
6789101112
13141516171819
20212223242526
272829303112
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属性设置日历周一优先

2025年7月<今日>
一
二
三
四
五
六
日
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
July 2025<today>
Mon
Tue
Wed
Thu
Fri
Sat
Sun
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
展开查看
vue
<template>
    <t-calendar lang="zh" mondayFirst />
    <t-calendar lang="en" mondayFirst />
</template>

尺寸 ​

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

July 2025<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
July 2025<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
July 2025<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
Jul 2025<today>
Sun
Mon
Tue
Wed
Thu
Fri
Sat
293012345
6789101112
13141516171819
20212223242526
272829303112
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属性设置不同的颜色

2025年7月<今日>
日
一
二
三
四
五
六
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
2025年7月<今日>
日
一
二
三
四
五
六
293012345
6789101112
13141516171819
20212223242526
272829303112
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