TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
777
3.1m

日历 xCalendar ​

在线预览
在线模拟尺寸:

介绍 ​

日历面板，支持指定日期新式设置，角标，底部文本设置等暂不同时支持多选，因为不支持联合类型后期需要分开组件使用。

平台兼容 ​

H5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑️☑️x☑️4.14+1.0.1

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-calendar-view/x-calendar-view.uvue

使用 ​

ts

<x-calendar-view></x-calendar-view>

Props 属性 ​

名称说明类型默认值
modelValue同步当前时间v-model<br>不想受控:model-valuestring""
modelday:固定此值union'day'
disabledDays禁用的日期字符串如"2023-12-12"<br>它与下面的start，end不冲突。Array[] as string[]
disabled是否禁用用户交互，相当于展示日期。booleanfalse
vertical是否上下切换日历booleanfalse
startDate允许选择的开始日期string'1900-1-1'
endDate允许选择的结束日期string'2100-1-1'
dateStyle设置指定日期的样式<br>数据类型见：xCalendarDateStyle_typeArray[] as xCalendarDateStyle_type[]
format同步vmodel时格式化模板string'YYYY-MM-DD'
color选中的主题色，默认空值，取全局主题色<br>如果提供了dateStyle，以dateStyle为准string''
fontColor默认的文字颜色<br>如果提供了dateStyle，以dateStyle为准string'#333333'
fontDarkColor默认的暗黑文字颜色<br>如果提供了dateStyle，以dateStyle为准string'#ffffff'
activeFontColor默认选中时的文字颜色<br>如果提供了dateStyle，以dateStyle为准string'#ffffff'
rangColor范围选中时,范围中间的选中颜色,<br>如果为空,为color的透明度0.5;string''
rangFontColor``string''
headBgColor头的背景颜色，默认为透明string'transparent'
headFontColor头的文字颜色，提供了后暗黑失效会以这个为准。string''
headStyle头部自定义样式。string''
renderOnly循环渲染时，是否只渲染当前面板（如果你在pad等10年前的低端机上渲染日历有压力请打开此值为true)<br>关闭后可以提升滑动体验。booleantrue
seekDay你当前的一周的第一天的索引值是几：0: 周一，1: 周二，2: 周三，3: 周四，4: 周五，5: 周六，6: 周日number0
dateStatus给日期设定状态<br>类型为：xCalendarDateStyleStatusTypeArray[] as xCalendarDateStyleStatusType[]

Events 事件 ​

名称参数说明
change**value** : string[]时间变化时触发
click**value** : string当前日历面板的日期被点击时触发
currentChange**value** : string当前激活面板月份改变时触发（就是当前看到的月份面板）
update:modelValue**value** : string[]同步当前的选中的日期绑定
update:currentDate**value** : string同步当前查看的月份日期，请以日期形式提供值

Slots 插槽 ​

名称说明数据
header日历头，隐藏使用空插槽，将隐藏，如果想自定，请通过ref函数来翻页控制日历走向。-
footer日历尾部-

Ref 方法 ​

名称参数返回值说明
next--下月
prev--上月
setCurrentMonth--设置日历返回到本月
clear--清空选择

示例文件路径 ​

json

/pages/biaodan/calendar-view

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
			<navigation-bar :background-color="xThemeConfigNavBgColor"
				:front-color="xThemeConfigNavFontColor"></navigation-bar>
		</page-meta>
		<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">日历 xCalendar</x-text>
			<x-text color="#999999">日历面板，支持指定日期样式设置，角标，底部文本设置等</x-text>
			<x-text color="#999999">注意区别：appx端是canvas绘制，h5是view节点，因此appx端右角标文件只能限制2个字符，英文3个字符</x-text>
		</x-sheet>

		<x-sheet :padding="['0']" :margin="['12','0','12','12']"
			:linear-gradient="_isDark?([] as string[]):['bottom','#d1eaed','#effdff']">
			<x-calendar-view :dateStatus="dateStatus" @change="onchange" v-if="show" :seek-day="seekDay"
				:date-style="dateStyle" :disabled-days="['2024-5-31']" v-model="date"></x-calendar-view>
			<view class="pa-32">
				<x-button :block="true" @click="setdate">设置日期样式数据</x-button>
			</view>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">禁用头，尾，禁用用户操作和切换，可以实现自定日历。</x-text>
		</x-sheet>
		<x-sheet :padding="['0']">
			<x-calendar-view @change="onchange" v-if="show" :seek-day="seekDay" :disabled="true" :hideHeader="true"
				:disabledSwiper="true"></x-calendar-view>
		</x-sheet>

		<view style="height:50px"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="uts">
	import { xCalendarDateStyle_type, xCalendarDateStyleStatusType } from "@/uni_modules/tmx-ui/interface.uts"
	import { xConfig } from "@/uni_modules/tmx-ui/config/xConfig.uts"
	const date = ref('2024-2-26')
	const dateStyle = ref<xCalendarDateStyle_type[]>([])
	const dateStatus = ref<xCalendarDateStyleStatusType[]>([{
		between: {
			start: "2024-2-1",
			end: "2024-2-21",
			color: "red",
			notDate: ['2024-2-20'],
		},
		date: [
			{ date: '2024-2-29', color: 'green' },
			{ date: '2024-5-21', color: 'green' },
			{ date: '2024-5-24', color: 'green' },
		]
	} as xCalendarDateStyleStatusType])
	const show = ref<boolean>(false)
	const seekDay = ref<number>(0)
	const _isDark = computed(() : boolean => xConfig.dark == 'dark')

	const onchange = (dates : string) => {
		console.log(dates)
	}
	const setdate = () => {
		date.value = "2024-5-8"

		dateStyle.value = [
			{ date: '2024-5-3', color: '#00aa7f', label: '推荐', fontColor: 'white' } as xCalendarDateStyle_type,
			{ date: '2024-5-20', label: '完成', fontColor: 'orange' } as xCalendarDateStyle_type,
			{ date: '2024-5-21', label: '爆满', fontColor: 'red' } as xCalendarDateStyle_type,
			{ date: '2024-5-31', label: '禁用' } as xCalendarDateStyle_type,
			{ date: '2024-5-18', dot: true } as xCalendarDateStyle_type,
			{ date: '2024-5-17', dot: true, dotColor: "orange", dotLabel: "36" } as xCalendarDateStyle_type,
			{ date: '2024-5-1', dot: true, dotColor: "#52c428", dotLabel: "假", label: "劳动节", fontColor: "#52c428" } as xCalendarDateStyle_type,
			{ date: '2024-5-4', dot: true, dotColor: "#aa55ff", dotLabel: "休", label: "劳动节", fontColor: "#52c428" } as xCalendarDateStyle_type,
		] as xCalendarDateStyle_type[]
	}
	const setSeekDay = (day : number) => {
		seekDay.value = day;
		console.log(`设置周起始日为: ${day}`);
	}
	onReady(() => {
		show.value = true;
	})
</script>

<style lang="scss">

</style>
最近更新