更新记录

1.0.0（2025-07-10）

初始版本

平台兼容性

uni-app x(4.26)

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>