Gets the date of the current week and the corresponding day of the week

In the code

<template name="calendar">
	<view class="container">
		<view class="week">
			<ul v-for="i in week">
				<li>{{ i.label }}</li>
			</ul>
		</view>
		<view class="day">
			<ul v-for="i in days">
				<li v-bind:class="[i.day == today1 ? 'activeClass' : '']">{{ i.day }}</li>
			</ul>
		</view>
	</view>
</template>

<script>
export default {
	name: 'calendar',
	props: {
		today: ' '
	},
	data() {
		return {
			week: [
				{
					label: 'day',
					val: '0'
				},
				{
					label: '一',
					val: '1'
				},
				{
					label: '二',
					val: '2'
				},
				{
					label: '三',
					val: '3'
				},
				{
					label: 'four',
					val: '4'
				},
				{
					label: 'five',
					val: '5'
				},
				{
					label: '六',
					val: '6'} ], days: this.getThisWeek(), today1: new Date().getDate() }; }, methods: {/* Get the current week */getThisWeek() {
			letarr = []; /* Create an array that accepts the current week */letdate = new Date(); /* Get the current date */letdays = new Date(date.getYear(), date.getMonth() + 1, 0).getDate(); /* Get the number of days in the month */letpreDays = new Date(date.getYear(), date.getMonth(), 0).getDate(); /* Get the number of days in the last month */letday = new Date().getDate(); // Get the current numberletindex = new Date().getDay(); // Get the day of the week /* date to the left */for (let i = index, tempDay = day; i >= 0; i--) {
				if (tempDay < 1) {
					tempDay = preDays;
					arr.push({ day: tempDay, index: i });
					tempDay--;
					continue; } arr.push({ day: tempDay, index: i }); tempDay--; } arr.reverse(); /* Invert array */ /* date to the right */for (let i = index + 1, tempDay = day + 1; i <= 6; i++) {
				if (tempDay > days) {
					tempDay = 1;
					arr.push({ day: tempDay, index: i });
					tempDay++;
					continue;
				}
				arr.push({ day: tempDay, index: i });
				tempDay++;
			}
			returnarr; }},created() {
		this.getThisWeek();
	},
	mounted() {}}; </script> <style> .container { width: 100%; height: 100rpx; border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx; background-color: rgb(0, 122, 255); } .week, .day { display: flex; flex-direction: row; justify-content: center; align-items: center; } ul { display: flex; padding: 0; Width: 14.28%; flex-direction: row; justify-content: center; align-items: center; } ul > li { width: 100%; height: 40rpx; list-style: none; text-align: center; line-height: 40rpx; margin: 0 auto; color:#ffffff;Opacity: 0.5; font-size: small; } .activeClass { width: 50%; background-color:#ffffff;
	border-radius: 60rpx;
	color: rgb(0, 122, 255);
}
</style>

Copy the code

Implementation effect

Comparison of Today’s dates