日历uniapp

<template>
	<view class="maon">
		<view class="time">
			<view class="flex" style="justify-content: space-between">
				<u-icon name="arrow-right" color="#484848" :label="month+'月'" labelColor='#484848' labelPos='left'
					labelSize='40rpx' size='30rpx'></u-icon>
				<view>
					<u-icon name="arrow-left" color="#484848" size='40rpx' @click="getPreviousMonth"></u-icon>
					<u-icon name="arrow-right" style="margin-left: 62rpx;" color="#484848" size='40rpx'
						@click="getNextMonth"></u-icon>
				</view>
			</view>
			<view class="flex" style="justify-content: space-between">
				<view v-for="(i,index) in weekname" :key="i">
					<view class="flex" style="flex-direction: column;">
						<view class="week">{{i}}</view>
						<view v-for="(inm,ins) in weekday" :class="id==(ins*7+index)?'cla chec':'cla'"
							@click="mack(ins*7+index)" :key="ins*7+index">
							{{getdata(ins*7+index)}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				month: 11,
				year: 2023,
				weekname: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
				day: [],
				weekday: 0,
				id: null
			};
		},
		onLoad() {
			this.year = new Date().getFullYear();
			this.month = new Date().getMonth() + 1;
			this.gettiem(this.year, this.month)
		},
		methods: {
			mack(i) {
				this.id = i
			},
			gettiem(year, month) {
				this.day = this.getCalendarArray(year, month);
				this.weekday = Math.floor(this.day.length / 7) + 1
			},
			//上个月
			getPreviousMonth() {
				this.id = null
				if (this.month === 1) {
					this.year = this.year - 1;
					this.month = 12
				} else {
					this.month = this.month - 1
				}
				this.gettiem(this.year, this.month)
			},
			//下个月
			getNextMonth() {
				this.id = null
				if (this.month === 12) {
					this.year = this.year + 1;
					this.month = 1
				} else {
					this.month = this.month + 1
				}
				this.gettiem(this.year, this.month)
			},
			getdata(index) {
				if (this.day[index]) {
					return this.day[index].date
				} else {
					return ''
				}
			},
			getCalendarArray(year, month) {
				const calendarArray = [];
				for (let i = 1; i < new Date(year, month - 1, 1).getDay(); i++) {
					calendarArray.push({
						date: '',
						dayOfWeek: i,
					})
				}
				const daysInMonth = new Date(year, month, 0).getDate();
				for (let i = 1; i <= daysInMonth; i++) {
					const day = new Date(year, month - 1, i);
					calendarArray.push({
						date: i,
						dayOfWeek: day.getDay(),
					});
				}
				return calendarArray;
			},
		}
	}
</script>
<style>
	page {
		background-color: #F0F0F0;
	}
</style>
<style scoped lang="scss">
	.maon {
		padding: 26rpx 32rpx 46rpx 32rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.week {
		margin: 30rpx 0 20rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: rgba(60, 60, 67, 0.3);
		line-height: 36rpx;
	}

	.cla {
		font-size: 40rpx;
		font-family: SF Pro Display-Regular, SF Pro Display;
		font-weight: 400;
		color: #484848;
		height: 48rpx;
		margin-bottom: 20rpx;
		position: relative;
		z-index: 5;
	}

	.chec {
		font-size: 40rpx;
		font-family: SF Pro Display-Regular, SF Pro Display;
		font-weight: 400;
		color: #FFFFFF;
		background: #FF0000;
		border-radius: 50%;
		width: 58rpx;
		text-align: center;
		height: 58rpx;
	}

	.time {
		box-sizing: border-box;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 20rpx 120rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		padding: 34rpx 32rpx;
	}
</style>