更新记录
1.0.0(2025-07-10)
初始版本
平台兼容性
uni-app x(4.26)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | √ | √ | - | - |
yzc-calendar-x
yzc-calendar-x 是一款可左右滑动上下收缩(月/周模式)的仿钉钉uniappx日历插件(请测试合适后再购买)
使用示例
<template>
<view class="content">
<!-- 日历 -->
<YZCCalendarX
ref="calendar"
class="calendar"
:showTopBar="true"
:showLunarDate="true"
:weekstart="7"
minDateStr="2025-02-15"
maxDateStr="2026-02-25"
:signeddates="signeddates"
background="#f9f9f9"
noramlColor="black"
topBarBottomColor="rgba(0, 0, 0, 0.15)"
chooseTextColor="white"
chooseBackgroundColor="#0157d8"
todayTextColor="red"
@chooseDate="choseDate"
@yearMonthChanged="yearMonthChanged"
>
</YZCCalendarX>
</view>
</template>
<script lang="uts">
import YZCCalendarX from '@/uni_modules/yzc-calendar-x/components/yzc-calendar-x/yzc-calendar-x.uvue'
export default {
components: {
YZCCalendarX
},
data() {
return {
yearMonth: '',
weekIndx: 0,
week: ['日', '一', '二', '三', '四', '五', '六'],
signeddates:['2024-12-09', '2015-01-11'],
currentDate: '',
isTody: false
}
},
computed: {
currentWeek () {
return '周' + this.week[this.weekIndx]
}
},
methods: {
choseDate(date: string, isTody: boolean, weekIndex: number) {
this.currentDate = date
this.isTody = isTody
this.weekIndx = weekIndex
console.log('选中日期', date, isTody, this.currentWeek)
},
yearMonthChanged(yearMonth: string) {
this.yearMonth = yearMonth
}
}
}
</script>
<style lang="scss">
.content {
width: 100%;
height: 100%;
.calendar {
width: 100%;
}
}
</style>