自制日历功能

1，获取当前日期数据

	  	getData() {
  			let Data = new Date()
  			let day = Data.getDate()
  			let mounth = Data.getMonth()+1
  			this.mounth = mounth
  			let year = Data.getFullYear()
  			this.year = year
  			this.setCalendar(year, mounth)
			},

2，获取当前月份日期排列

	  	setCalendar(year, mounth) {
				//获取月份的总天使
			  let d = new Date(year,mounth,0);
				let days=d.getDate();
				//获取当前月份第一天的周几
				let w = new Date(year,mounth-1,1);
				let week = w.getDay();
				let weeks=[]
				let allDays = days+week-1
				let constDayOfWeeks = [];
				for(let j=week;j<=allDays;j++){
					constDayOfWeeks.push({week:j%7,day:j-week+1})
				}
				let week1=[]
				let week2=[]
				constDayOfWeeks.forEach((n, index)=>{
					if (n.week == 0 && index !==0) {
						week2.push(week1)
						week1 = []
						week1.push(n)
					} else if (index == constDayOfWeeks.length-1) {
						week1.push(n)
						week2.push(week1)
					} else {
						week1.push(n)
					}
				})
				let week3 = []
				week2.forEach((n)=>{
					if(n.length !=7) {
						if (n[0].week == 0) {
							let len = 7 - n.length
							let arr = Array(len)
							n = [...n, ...arr]
						} else {
							let len = 7 - n.length
							let arr = Array(len)
							n = [...arr, ...n]
						}
					}
					week3.push(n)
				})
	  			this.weeksAll = week3
	  	},

3，html样式

<table class="table-1 weeks" border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th>星期日</th>
					<th>星期一</th>
					<th>星期二</th>
					<th>星期三</th>
					<th>星期四</th>
					<th>星期五</th>
					<th>星期六</th>
				</tr>
				<tr v-for="(item, index) in weeksAll" :key="index">
					<td v-for="(items, index1) in item" :key="index1">
						<div class="datas" v-if="items != undefined" :class="{'datas1': studyList[`${year}-${mounth>9?mounth+'': '0'+mounth}-${items.day>9?items.day+'':'0'+items.day}`] && !studyList[`${year}-${mounth>9?mounth+'': '0'+mounth}-${items.day>9?items.day+'':'0'+items.day}`]['have'] || !studyList[`${year}-${mounth>9?mounth+'': '0'+mounth}-${items.day>9?items.day+'':'0'+items.day}`]}">
							{{items == undefined? '': items.day}}
						</div>
					</td>
				</tr>
			</table>

css
	.weeks {
		& .datas {
				width: 100%;
				height: 30px;
				text-align: center;
				line-height: 30px;
				background: #ed7d31;
		}
		& .datas1 {
				width: 100%;
				font-size: 60px;
				font-weight: bold;
				text-align: center;
				height: 155px;
				line-height: 155px;
				background: none;
				
		}
	}

4，切换月份

			//上一月
			upMounth () {
				if (this.mounth == 1) {
					this.mounth = 12
					this.year = this.year - 1
				} else {
					this.mounth = this.mounth - 1
				}
  			this.setCalendar(this.year, this.mounth)
			},
			//下一月
			downMounth() {
				if (this.mounth == 12) {
					this.mounth = 1
					this.year = this.year + 1
				} else {
					this.mounth = this.mounth + 1
				}
  			this.setCalendar(this.year, this.mounth)
			},