vue/H5的日历组件可简单定制

在components创建riliZujian.vue

<template><div class="max_box"><!-- 日历 文字 --><div class="month"><div @click="lastMonth" class="monthText13">上月</div><div class="monthText2">{{ year }}年{{ month }}月</div><div class="monthText13" @click="nextMonth">下月</div></div><!-- 日历 周 --><div class="week"><div v-for="weeks in weekArr" :key="weeks">{{ weeks }}</div></div><!-- 日历 日 --><div class="day"><div:class="[{ checkday: !days.date }, { choose: days.flag }]"v-for="(days, index) in dayArr":key="index">{{ days.day }}<img src="./yidaka.png" class="dayImg" v-if="days.flag" /></div></div></div>
</template><script>
export default {props: {already: {type: Array}},watch: {already: {handler (v) {// 监听getAlready方法 获得已打卡的样式this.getAlready()},immediate: true, // 第一次赋值时触发deep: true // 深度监听}},name: 'rili-zujian',data () {return {dayArr: [], // 当前月每日day: new Date().getDate(), // 当前日year: new Date().getFullYear(), // 当前年month: new Date().getMonth() + 1, // 当前月weekArr: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 每周aheadDay: 0 // 前方空白天数数量}},mounted () {const that = this// 初始日期that.initDate()},methods: {// 渲染已经签到的日期getAlready () {for (const i in this.dayArr) {if (this.already.indexOf(new Date(this.dayArr[i].date).getTime()) === -1) {this.$set(this.dayArr[i], 'flag', false)} else {this.$set(this.dayArr[i], 'flag', true)}}},// 初始化日期initDate () {const that = thisthat.dayArr = []// 当前月总天数const totalDay = new Date(that.year, that.month, 0).getDate()// 遍历总天数将日期逐个添加至数组for (let i = 1; i <= totalDay; i++) {// 得到需补充天数const value = new Date(that.year, that.month - 1, i).getDay()// 补充前面空白日期if (i === 1 && value !== 0) {that.addBefore(value)that.aheadDay = value}// 添加本月日期const obj = {}obj.date =that.year +'-' +that.formatNum(that.month) +'-' +that.formatNum(i)obj.day = ithat.dayArr.push(obj)// 补充后面空白日期if (i === totalDay && value !== 6) that.addAfter(value)}},// 补充前面空白日期addBefore (value) {const that = thisconst totalDay = new Date(that.year, that.month - 1, 0).getDate()for (let i = 0; i < value; i++) {const obj = {}obj.date = ''obj.day = totalDay - (value - i) + 1that.dayArr.push(obj)}},// 补充后空白日期addAfter (value) {const that = thisfor (let i = 0; i < 6 - value; i++) {const obj = {}obj.date = ''obj.day = i + 1that.dayArr.push(obj)}},// 格式化日期位数formatNum (num) {return num < 10 ? '0' + num : num},// 上一个月lastMonth () {const that = thisif (that.month === 1) {that.year -= 1that.month = 12} else {that.month -= 1}that.initDate()that.getAlready()},// 下一个月nextMonth () {const that = thisif (that.month === 12) {that.year += 1that.month = 1} else {that.month += 1}that.initDate()that.getAlready()}}
}
</script><style lang="less" scoped>
// 最大的盒子
.max_box {width: 375px;box-sizing: border-box;background-color: none;
}
// 月周日的样式 flex布局
.month,
.week,
.day {width: 375px;display: flex;align-items: center;justify-content: space-between;
}
// 月的文字的样式
.month {height: 50px;
}
.monthText13 {width: 50px;height: 50px;line-height: 50px;text-align: center;
}
.monthText2 {width: 100px;height: 50px;line-height: 50px;text-align: center;
}
// 日 flex超出 的换行
.day {flex-wrap: wrap;
}
// 周和日 的div样式
.week > div,
.day > div {width: 32px;height: 32px;line-height: 32px;margin: 9px;text-align: center;position: relative;
}
// 本月之外的数字 改成白色 隐藏起来
.checkday {color: #f9f9f9;
}
// 已打卡 的日期 的样式
.choose {color: #ffffff;background: #b5443a;border-radius: 10px;position: relative;
}
.dayImg {width: 36px;height: 13px;position: absolute;top: -3px;left: 0;
}
</style>

在业务代码中引入 riliZujian 组件

<template><!-- 打卡领取道具礼包 --><div class="maxBox"><!-- 导航栏 只有返回键 --><divclass="title":style="{ top: this.$route.query.statusBarHeight + 'px' }"><img src="./climbersImg/title01.png" class="title01" @click="goBack" /><div class="title03"></div></div><!-- 打卡 背景图 --><img src="./climbersImg/dakaMaxBg.png" class="dakabeijingtu" /><!-- 内容 --><div class="content"><!-- 用户信息 --><div class="content_top"><!-- 打卡 打卡规则 子绝父相 --><imgsrc="./climbersImg/dakaguize.png"class="dakaguize"@click="onDakaguize"/><img :src="userInfo.userHeadUrl" class="content_top_img" /><div class="content_top_text"><div class="content_top_text_1"><imgsrc="./climbersImg/dakaText1.png"class="content_top_text_1_img"/><div class="content_top_text_1_number">{{ userInfo.signCount }}</div><imgsrc="./climbersImg/dakaText2.png"class="content_top_text_1_img"/></div><div class="content_top_text_2"><div class="content_top_text_2_text"><span style="color: #b5443a">{{ userInfo.signCount }}</span>/{{ userInfo.amount }}元</div><div class="content_top_text_2_text">满{{ userInfo.amount }}元自动发放到钱包</div></div></div></div><!-- 日历 --><riliZujian :already="dakaData" @changeMonth="historysign" /></div><!-- 弹出框 打卡规则 --><van-popup v-model="showDakaguize" position="bottom" style="background: none;"><img src="./climbersImg/dakaguizeBig.png" class="guizetanchuang" /></van-popup></div>
</template><script>
// getDakaSub,
import { getDakaUserInfo, getDakaRili } from '@/api/zhidou'
import riliZujian from '@/components/rilizujian.vue'export default {name: 'climbers-dakalinglibao',data () {return {showDakaguize: false, // 弹出框 展示打卡规则的字段dakaData: [], // 打卡的日历的接收字段userInfo: {} // 用户的打卡和基本信息}},components: {riliZujian},mounted () {this.getUserInfo()this.historysign()},methods: {// 打开 打卡规则 的方法onDakaguize () {console.log(123)this.showDakaguize = true},// 获取当前用户的打卡基础信息getUserInfo () {getDakaUserInfo({ userId: this.$route.query.userId }).then((res) => {// console.log(res, 'res---')if (res.status === 200) {this.userInfo = res.data} else {this.$toast.fail(res.msg)}})},// 获取当前用户的打卡日历信息historysign () {getDakaRili({userId: 107,time: '2025-03-17 12:26:43'}).then((res) => {if (res.status === 200) {for (const i in res.data) {// 接口返回的每一项 如果为 true 则进来if (res.data[i]) {this.dakaData.push(new Date(i).getTime())}}// console.log(this.dakaData)} else {this.$toast.fail(res.msg)}})},// 返回到上级页面goBack () {this.$router.push({path: '/上级页面地址',query: {userId: this.$route.query.userId,statusBarHeight: this.$route.query.statusBarHeight}})}}
}
</script><style lang="less" scoped>
.maxBox {width: 375px;position: relative;
}
.title {width: 375px;height: 44px;display: flex;justify-content: space-between;align-items: center;position: absolute;left: 0;.title01 {width: 28px;height: 28px;margin-left: 16px;}.title03 {width: 44px;height: 20px;}
}
.dakabeijingtu {width: 375px;
}
.content {width: 375px;// height: 500px;background-image: url(./climbersImg/dakaMinBg.png);background-size: 100% 100%;position: absolute;top: 250px;bottom: 0;.content_top {width: 343px;height: 94px;margin: 0 16px;border-bottom: 1px solid rgba(0, 0, 0, 0.1);display: flex;position: relative;.dakaguize {width: 34px;height: 96px;position: absolute;top: -23px;right: -18px;}.content_top_img {width: 56px;height: 56px;border-radius: 56px;margin: 21px 15px 0 18px;}.content_top_text {width: 254px;margin-top: 20px;.content_top_text_1 {width: 254px;height: 32px;display: flex;align-items: center;.content_top_text_1_img {height: 16px;}.content_top_text_1_number {height: 32px;line-height: 32px;font-size: 27px;font-weight: 700;color: #b5443a;margin: 0 5px;}}.content_top_text_2 {width: 254px;height: 20px;display: flex;.content_top_text_2_text {font-size: 14px;font-weight: 400;color: rgba(0, 0, 0, 0.5);margin-right: 8px;}}}}
}
.guizetanchuang {width: 375px;
}::v-deep .van-calendar__header {background: rgba(255, 255, 255, 0.1);
}
::v-deep .van-calendar__body {background: rgba(255, 255, 255, 0.1);
}
::v-deep .van-calendar__header-title {display: none;
}
</style>

参考资料：签到组件、可签到和补签，统计签到天数和积分 - DCloud 插件市场