uniapp 微信小程序 自定义日历组件

效果图

功能：可以记录当天是否有某些任务或者某些记录

具体使用：

子组件代码

<template><view class="Accumulate"><view class="bx"><view class="bxx"><view class="plank"></view><view class="calendar"><view class="calendarbx"><view class="calendarview flex jc ac"><u-icon name="arrow-left" color="#232323" size="18" @click="addmonth(1)"></u-icon><view class="title">{{viewday}}</view><u-icon name="arrow-right" color="#232323" size="18" @click="addmonth(2)"></u-icon></view><view class="week flex  ac"><view class="weekli" v-for="(item,index) in week">{{item.title}}</view></view><view class="data"><view class=" flex  ac flexwrap" v-if="show"><view class="datali flex jc ac" v-for="(item,index) in days" :key="item"><!-- 三层判断条件 --><view class="dataliradius flex jc ac flexwrap":class="newday==item&&isnewmonth&&chooseday==item?'dataliradiusc':newday==item&&isnewmonth&&chooseday!=item?'dataliradiuscc':newday!=item&&chooseday==item?'dataliradiusc':''"@click.stop="funchoosedayy(item)">{{item==newday&&isnewmonth?'今':item}}<view class="rounds"><view class="round" v-if="recordlist.includes(item)&&item!=chooseday"></view></view></view></view></view><!-- 以下是为了防止切换闪烁而复制了一份用于展示 --><view class=" flex  ac flexwrap" v-else><view class="datali flex jc ac" v-for="(item,index) in days" :key="item"><!-- 三层判断条件 --><view class="dataliradius flex jc ac flexwrap":class="newday==item&&isnewmonth&&chooseday==item?'dataliradiusc':newday==item&&isnewmonth&&chooseday!=item?'dataliradiuscc':newday!=item&&chooseday==item?'dataliradiusc':''">{{item==newday&&isnewmonth?'今':item}}<view class="rounds" v-if="recordlist.includes(item)&&item!=chooseday"><view class="round"></view></view></view></view></view></view></view></view></view></view></view>
</template><script>export default {data() {return {day: Number(new Date()), //用于记录今天showday: null, //用来存储要加减的日期viewday: null, //页面上展示的日期newday: null, //当天几号isnewmonth: true, //是否是当月chooseday: null, //选中的那一天show: true,week: [{title: '一'},{title: '二'},{title: '三'},{title: '四'},{title: '五'},{title: '六'},{title: '日'}],days: [], //天数数组height: 0};},
props:{recordlist:{default: [], //是否有练习记录，需要每次切换月份的时候查询，那几天有练习记录，下标会记录stype:Array}},onLoad() {},onReady() {let time = this.yearFormat(this.day, 'obj')this.newday = time.day; //当天日期只用初始化一次就不用再初始化了this.showday = time.year + '-' + time.month + '-' + time.day; //用来存储要加减的日期this.viewday = this.yearFormat(this.showday) //页面上展示的日期this.chooseday = time.day;this.addmonth(0) //初始化时间},methods: {//选中日期funchoosedayy(item) {// console.log(item, '选中几号');if (item == '') {return}this.chooseday = item;let dataobj = this.showday.split('-');let month;let year;let day;let sendtime = dataobj[0] + '-' + dataobj[1] + '-' + this.chooseday;this.$emit('sendtime', '选中的时间:' + sendtime);},//加减月份,初始化月份addmonth(type) {this.show = false;setTimeout(() => {this.show = true;}, 100)let newmonth = this.yearFormat(this.day, 'obj')let dataobj = this.showday.split('-');let month;let year;let day;//加if (type == 2) {if (dataobj[1] == 12) {month = 1;year = (dataobj[0] * 1) + 1} else {year = (dataobj[0] * 1);month = (dataobj[1] * 1) + 1}}//减if (type == 1) {if (dataobj[1] == 1) {month = 12;year = (dataobj[0] * 1) - 1} else {year = (dataobj[0] * 1);month = (dataobj[1] * 1) - 1}}//初始化使用if (type == 0) {month = (dataobj[1] * 1);year = (dataobj[0] * 1);}let daynum = this.getDaysInYearMonth(year, month);this.days = daynum; //获取天数let week = this.getDayOfWeek(year, month, 1) //获取每个月1号星期几//0 相当于星期日let addday;if (week == 0) {addday = 6;} else {addday = (week - 1)}for (let i = 0; i < addday; i++) {this.days.unshift('')this.$forceUpdate()}//判断是否是当月,是当月的话，选中当天日期，不是则是当月1号if (newmonth.month == month) {day = dataobj[2];this.chooseday = newmonth.day;this.isnewmonth = true;this.showday = year + '-' + month + '-' + day;this.viewday = year + '年' + month + '月';// console.log(this.showday, '当月');this.$forceUpdate()} else {day = 1;this.chooseday = day;this.isnewmonth = false;this.showday = year + '-' + month + '-' + day;this.viewday = year + '年' + month + '月';this.$forceUpdate()}// console.log(this.days);this.$emit('state_sendtime', '初始化时间:' + this.showday);this.$forceUpdate()},//获取年月yearFormat(num, obj) {//过滤器 用于格式化时间let date = new Date(num); //时间戳为10位需*1000，时间戳为13位的话不需乘1000let year = date.getFullYear();let month = ("0" + (date.getMonth() + 1)).slice(-2);let sdate = ("0" + date.getDate()).slice(-2);let hour = ("0" + date.getHours()).slice(-2);let minute = ("0" + date.getMinutes()).slice(-2);let second = ("0" + date.getSeconds()).slice(-2);let result;if (obj) {// 拼接result = {year: year,month: month,day: sdate}} else {result = year + '年' + month + '月'}// 返回return result;},// 获取该年该月的天数getDaysInYearMonth(year, month) {// 每一次进行更新前,先清空日期数组month = parseInt(month, 10);// javascript中Date()对象的getDate()是获取时间对象对应于一个月中的某一天（1~31），当设置为0的时候，getDate()返回的就是最后一天，刚好对应我们需要的值。var date = new Date(year, month, 0);let arr = [];for (var i = 1; i <= date.getDate(); i++) {arr.push(i)}return arr;},//获取周几// console.log(getDayOfWeek(2023, 10, 5)); // 输出：星期四// 0就是 周日getDayOfWeek(year, month, day) {console.log(year, (month * 1), day);const date = new Date(year + '-' + (month * 1) + '-' + day).getDay(); // 注意月份是从0开始计数const options = {weekday: 'long'};//new Intl.DateTimeFormat('zh-CN', options).format(date)return date;}}}
</script><style lang="less" scoped>.Accumulate {// position: relative;}.back {width: 100%;height: 360rpx;border-radius: 0 0 60rpx 60rpx;background: #3366ff;position: absolute;}.Evaluationlist {margin-top: 30rpx;padding: 0 30rpx;box-sizing: border-box;overflow: scroll;.Evaluationlistli {padding: 30rpx 20rpx;box-sizing: border-box;border-radius: 30rpx;background: #fff;margin-bottom: 30rpx;.left {// display: block;width: 70%;max-height: 100rpx;}.right {padding: 10rpx 30rpx;height: 60rpx;box-sizing: border-box;border-radius: 20rpx;background: #3366ff;color: #fff;}.rightb {padding: 10rpx 30rpx;height: 60rpx;box-sizing: border-box;border-radius: 20rpx;background: #fff;color: #3366ff;border: 1rpx solid #3366ff;}}}.bx {width: 100%;// position: absolute;z-index: 999;.plank {width: 100%;height: 30rpx;}}.viewdata {width: 100%;height: 130rpx;padding: 0 30rpx;box-sizing: border-box;.viewdatali {width: 46%;height: 100%;border-radius: 30rpx;.num {width: 100%;font-size: 38rpx;font-weight: bold;text-align: center;}.title {width: 100%;font-size: 24rpx;margin-top: 5rpx;text-align: center;}}.viewdataliA {background: #f5f5f5;color: skyblue;}.viewdataliB {background: #f5f5f5;color: pink;}}.calendar {width: 100%;// padding: 30rpx 30rpx 0rpx 30rpx;box-sizing: border-box;// border-radius: 30rpx;.calendarbx {width: 100%;padding: 30rpx 30rpx 0rpx 30rpx;box-sizing: border-box;border-radius: 30rpx;background: #fff;.calendarview {background: lightgoldenrodyellow;padding: 10rpx 20rpx;box-sizing: border-box;.title {color: #232323;font-size: 28rpx;margin-left: 100rpx;margin-right: 100rpx;}}.week {font-size: 26rpx;color: #999;margin-top: 30rpx;.weekli {width: 12.2%;height: 30rpx;text-align: center;margin-right: 2.4%;line-height: 30rpx;}.weekli:nth-child(7n+7) {margin-right: 0% !important;}}.data {font-size: 28rpx;color: #999;margin-top: 40rpx;font-weight: bold;min-height: 410rpx;.datali {width: 12.2%;height: 50rpx;// text-align: center;margin-right: 2.4%;margin-bottom: 40rpx;.dataliradius {width: 50rpx;height: 50rpx;border-radius: 999%;background: #fff;line-height: 50rpx;color: #232323 !important;.rounds {width: 100%;height: 10rpx;.round {width: 10rpx;height: 10rpx;border-radius: 999%;background: #3366ff;margin: auto;}}}.dataliradiuscc {color: #3366ff !important;}.dataliradiusc {width: 50rpx;height: 50rpx;border-radius: 999%;background: #3366ff;color: #fff !important;line-height: 50rpx;}}.datali:nth-child(7n+7) {margin-right: 0% !important;}}}}
</style>

父组件

			<customCalendar @sendtime="sendtime" @state_sendtime="state_sendtime" :recordlist="[27, 25, 26, 29, 28]" ></customCalendar>

有需求可以自行修改。