# t-calendar

Calendar 日历

t-calendar 组件介绍

t-calendar 是一个功能强大的日历选择组件，支持单日期选择、多日期选择、日期范围选择等多种模式，同时提供农历显示、节日显示、自定义选中日期标记和徽章等功能。组件采用 Canvas 绘制技术，性能优异，支持横向和纵向滑动切换月份，适用于各种日期选择场景。

t-calendar 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-calendar 基础用法

基础用法参考 demo/calendar/calendar.uvue，通过 mode 属性设置选择模式，使用 v-model 绑定选中日期。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title="Calendar 日历"
				sub-title="5.0采用自研Canvas flex布局引擎绘制，未采用swiper，纯Canvas实现滚动切换动画,最全日历，支持农历 节气"></t-card>
		<view :class="[`tvg trm`]">
			<view :class="[`fl h-50 faic fjcb`]">
				<view class='f fc'
					  v-for="(item,index) in date_header_map"
					  :key="index">
					<text :class="[`ttc-`]">{{item}}</text>
				</view>
			</view>
			<t-calendar :class="[`tvg`]"
						v-model="val"
						:selected="selected"></t-calendar>
		</view>
		<t-button type="primary"
				  class="mtb-15"
				  @click="test">双向绑定测试</t-button>
		<t-picker-calendar v-model="val1">
		</t-picker-calendar>
		<view :class="[`r-10 fc tvg h-40 mbt-15`]">
			<text :class="[`ttl1`]">{{val.join(' ')}}</text>
		</view>
		<view :class="[`r-10 fc tvg h-40 mbt-15`]">
			<text :class="[`ttl1`]">{{val1.join(' ')}}</text>
		</view>
	</view>
</template>
<script setup>
	const date_header_map : string[] = ['一', '二', '三', '四', '五', '六', '日']
	const val = ref<string[]>(['2025-3-17'])
	const val1 = ref<string[]>(['2025-2-17'])
	const selected = ref<UTSJSONObject[]>([
		{
			date: '2025-3-17',
			info: '打折',
			infoColor: '#00cc81',
			badge: true,
			badgeText: '休',
			badgeColor: '#ff0000'
		},
		{
			date: '2025-3-19',
			info: '爆满',
			// infoColor: '#ff0000',
			badge: true,
			badgeText: '',
			badgeColor: '#00cc81',
		},
		{
			date: '2025-3-21',
			info: '已签到',
			infoColor: '#ff5500',
			badge: true,
			badgeText: '16',
			badgeColor: '#ff0000',
		}
	])
	function test() {
		val.value = ['2025-3-17']
	}
</script>

t-calendar Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
closeValidate	是否关闭验证	boolean	false
modelValue	绑定的日期值	string[]	[]
title	标题	string	'请选择日期'
mode	选择模式，可选 single、multiple、range	string	'range'
disableTouch	是否禁用触摸	boolean	false
vertical	是否启用竖向滑动	boolean	false
selected	自定义选中日期的配置	UTSJSONObject[]	[]
lunar	是否显示农历	boolean	true
showMonthBg	是否显示月份背景	boolean	true
monthShowCurrentMonth	是否只显示当前月份	boolean	false
festival	是否显示节日	boolean	true
startDate	开始日期	string	''
endDate	结束日期	string	''

t-calendar Events

事件名	说明	回调参数
update:modelValue	绑定值变化时触发	string[]
select	选择日期时触发	CalendarDateType
change	日期变化时触发	string[]

Methods

方法名	说明	参数
prevMonth	切换到上一月	-
nextMonth	切换到下一月	-
prevYear	切换到上一年	-
nextYear	切换到下一年	-
resetSelection	重置选中的值	-
jumpToDate	跳转到指定日期	date: string (日期字符串，格式：YYYY-MM-DD)
getCurrentTime	获取当前显示的时间	-
setCurrentTime	设置当前显示的时间	time: string (日期字符串，格式：YYYY-MM-DD)