androidCnToWechatGrt/components/CusCalendar/index.vue

<template>
	<view class="box">
		<div class="week">
			<div class="w_pre" v-for="(pre,idx) in weekList" :key="idx">{{pre}}</div>
		</div>
		<div class="date">
			<div class="d_pre" v-for="(pre,idx) in calendarList" :key="idx" @tap="selectDay(pre,idx)">
				<div class="day" :class="{'dq':pre.iscurrentday,'select':pre.select,'wd':pre.isweekday}">{{pre.day}}</div>
				<div class="status" :class="{'zc':pre.status==1,'yc':pre.status==2}" v-if="pre.isweekday"></div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				weekList:['一','二','三','四','五','六','日'],
				year:new Date().getFullYear(),
				month:new Date().getMonth()+1,
				calendarList:[]
			}
		},
		created() {
			this.getDataByMonth(this.year,this.month);
		},
		methods:{
			getDataByMonth(year,month){
				const daysInMonth = new Date(year, month, 0).getDate();
				let calendar = [];
				for (let day = 1; day <= daysInMonth; day++) {
					let date = new Date(year, month - 1, day); // 注意月份从0开始
					let nyr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
					calendar.push({
					  nyr,
					  year,
					  month,
					  day,
					  week: date.getDay()||7,
					  isweekday:(date.getDay()||7)<6,
					  iscurrentday:nyr==new Date().Format('yyyy-MM-dd')
					});
				}
				let qlist = this.insertDays(year,month,calendar);
				let hlist = this.appendDays(year,month,calendar);
				let list = qlist.concat(calendar).concat(hlist);
				this.calendarList = JSON.parse(JSON.stringify(list));
				this.calendarList.forEach((c,i)=>{
					this.$set(this.calendarList[i],'select',false);
					this.$set(this.calendarList[i],'status',1);
				})
			},
			insertDays(year,month,calendar){
				let week = calendar[0].week;
				if(week==1) return []
				let qyear = month==1?(year-1):year;
				let qmonth = month==1?12:month-1;
				let daysInMonth = new Date(qyear, qmonth, 0).getDate();
				let list = [];
				for (let day = daysInMonth-week+2; day <= daysInMonth; day++) {
					let date = new Date(qyear, qmonth - 1, day);
					list.push({
					  nyr: `${qyear}-${String(qmonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
					  year:qyear,
					  month:qmonth,
					  day,
					  week: date.getDay()||7
					});
				}
				return list
			},
			appendDays(year,month,calendar){
				let week = calendar[calendar.length-1].week;
				if(week==7) return []
				let hyear = month==12?(year+1):year;
				let hmonth = month==12?1:month+1;
				let daysInMonth = new Date(hyear, hmonth, 0).getDate();
				let list = [];
				for (let day = 1; day <= 7-week; day++) {
					let date = new Date(hyear, hmonth - 1, day);
					list.push({
					  nyr: `${hyear}-${String(hmonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
					  year:hyear,
					  month:hmonth,
					  day,
					  week: date.getDay()||7
					});
				}
				return list
			},
			async selectDay(pre,idx){
				if(pre?.month==this.month){
					this.calendarList.forEach((c,i)=>{
						this.$set(this.calendarList[i],'select',i===idx);
					})
				}else{
					this.year = pre.year;
					this.month = pre.month;
					await this.getDataByMonth(pre.year,pre.month)
					let idx = this.calendarList.findIndex(c=>c.month==pre.month);
					this.$set(this.calendarList[idx],'select',true);
					this.$emit('selectDay',pre);
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.box{
		.week{
			display: flex;
			.w_pre{
				width: calc(100% / 7);
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #9D9D9D;
				line-height: 72rpx;
				text-align: center;
			}
		}
	
		.date{
			display: flex;
			flex-wrap: wrap;
			.d_pre{
				width: calc(100% / 7);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 15rpx 0;
				.day{
					width: 64rpx;
					height: 64rpx;
					border-radius: 16rpx;
					background: #FFFFFF;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #9D9D9D;
					line-height: 64rpx;
					text-align: center;
					&.wd{
						color: #1D2129;
					}
					&.dq{
						color: #2E69EB;
						font-weight: bold;
						background: rgba(46,105,235,0.1);
					}
					&.select{
						color: #FFFFFF;
						font-weight: bold;
						background: #2E69EB;
					}
				}
				.status{
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					margin-top: 5rpx;
					&.zc{
						background: #2E69EB;
					}
					&.yc{
						background: #FEA400;
					}
				}
			}
		}
	}
</style>