vue实现周日历 日历按周切换 vue日程管理

实现的功能
1、点击今天：回到今日日期并选中今日日期，查当天数据
2、点击左箭头：切换上一周
3、点击右箭头：切换下一周
4、黄圆圈代表有日程提醒，点击选中，下方对应显示当前日程提醒的内容，没有内容则显示暂无数据
5、进入当前页面，默认选中当天日期，查当天数据

vue日程管理按月查询请看上一篇文章

具体代码

template

<div class="schedule-calendar">
	<div class="calendar-box">
		<!-- 年月 -->
		<div class="calendar-top">
			<div class="yearMonth">
				{{ currentYear }}年{{ currentMonth }}月
			</div>
			<div class="today-btn" @click="toToday()">今天</div>
		</div>
		 <!-- 星期 --> 
		<div class="weekdays">
			<div>一</div>
			<div>二</div>
			<div>三</div>
			<div>四</div>
			<div>五</div>
			<div>六</div>
			<div>日</div>
		</div>
		<!-- 日期 --> 
		<div class="days-item">
			<div @click="pick(day,index)" v-for="(day, index) in days" :key="index" class="time-normal">
				<!--今天--> 
				<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" :class="[curShow == true ? 'time-active' : '']">{{ day.getDate() }}</span>
				<span v-else :class="[selectedCur == index ? 'time-active' : '']">{{ day.getDate() }}</span>
				<div v-for="(item, index) in timeData" :key="index">
					<i class="dots" v-if="item.scheduleAvailable == 1 && item.weeklyDate == formatDate(day.getFullYear(),day.getMonth()+1,day.getDate())"></i>
				</div>
			</div>
		</div>
		<div class="operate-arrow">
			<i class="el-icon-arrow-left ope-left" @click="weekPre"></i>
			<i class="el-icon-arrow-right ope-right" @click="weekNext"></i>
		</div>
	</div>
</div>

script

data() {
	return {
		// 日程
		timeData:[],//存放表格数据
		currentYear: "",   // 年份
		currentMonth: "",  // 月份
		currentDay: "",    // 日期
		currentWeek: "",    // 星期
		days: [],
		selectedCur:null,//选中的当前日期index
		timeNow:"",//今日
		curShow:true,//今日默认选中效果
		dateCur:null//选中的当前日期
	}
},
mounted() {
	this.initData()
	this.getCurrentDate() // 获取当前时间
	this.dateCur = this.timeNow
	this.getScheduleData()
},
methods(){
	//我的日程数据
	getScheduleData(time) {
		this.$http({
			url: this.$http.adornUrl('***/mySchedule'),
			method: "get",
			params: {
				switchDate: time,//默认传空
			}
		}).then(res => {
			console.log("日程：",res)
			if(res.data && res.data.length){
				this.timeData = res.data
			}
		}).catch(err => {
			console.log(err)
		});
	},
	// 我的日程-按周 开始
	toToday(){
		this.selectedCur = null
		this.curShow = true
		this.getCurrentDate() // 获取当前时间
		this.initData(this.timeNow)
		this.dateCur = this.timeNow
		this.getScheduleData(this.dateCur)
	},
	// 日期相关
	getDate() {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	},
	getCurrentDate() {
		this.timeNow = this.getDate({
			format: true
		})
		console.log("今日：",this.timeNow)
	},
	formatDate (year, month, day) {
		const y = year
		let m = month
		if (m < 10) m = `0${m}`
		let d = day
		if (d < 10) d = `0${d}`
		return `${y}-${m}-${d}`
	},
	initData (cur) {
		let date = ''
		if (cur) {
			date = new Date(cur)
			console.log("qqqq:",date)
		} else {
			date = new Date()
		}
		this.currentDay = date.getDate()          // 今日日期 几号
		this.currentYear = date.getFullYear()       // 当前年份
		this.currentMonth = date.getMonth() + 1    // 当前月份
		this.currentWeek = date.getDay() // 1...6,0   // 星期几
		if (this.currentWeek === 0) {
			this.currentWeek = 7
		}
		const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日
		this.days.length = 0
		// 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
		/* eslint-disabled */
		for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
			const d = new Date(str)
			d.setDate(d.getDate() - i)
			this.days.push(d)
		}
		for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
			const d = new Date(str)
			d.setDate(d.getDate() + i)
			this.days.push(d)
		}
	},
	//  上个星期
	weekPre () {
		const d = this.days[0]    // 如果当期日期是7号或者小于7号
		d.setDate(d.getDate() - 7)
		let preDate = this.formatDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
		console.log("上一周：",preDate)
		this.initData(d)
		this.getScheduleData(preDate)
		//点击上周时把点击选中清空 
		this.selectedCur = null
	},
	//  下个星期
	weekNext () {
		const d = this.days[6]    // 如果当期日期是7号或者小于7号
		d.setDate(d.getDate() + 7)
		let nextDate = this.formatDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
		console.log("下一周：",nextDate)
		this.initData(d)
		this.getScheduleData(nextDate)
		// 点击下周时把点击选中清空 
		this.selectedCur = null
	},
	// 当前选择日期
	pick (date,index) {
		console.log(index)
		this.selectedCur = index
		this.dateCur = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
		if(this.timeNow == this.dateCur){
			this.curShow = true
		}else{
			this.curShow = false
		}
		this.getScheduleData(this.dateCur)
	},
	// 我的日程-按周 结束
}

样式

/* 日程 */
	.schedule-calendar{
		background: #ECF6FF;
		border-radius: 8px;
		height: 123px;
		margin-bottom:10px;
	}
	.calendar-box{
		position: relative;
	}
	.schedule-list{
	    /* height: calc(100% - 170px); */
		overflow: hidden;
	    overflow-y: auto;
	}
	.schedule-list::-webkit-scrollbar {
		width: 5px;
	}
	.schedule-list::-webkit-scrollbar-thumb {
	    border-radius: 8px;
	    background-color: #ccc;
	}
	.schedule-list::-webkit-scrollbar-track {
	    border-radius: 8px;
	    background-color: #e7e7e7;
	    border: 1px solid #cacaca;
	}
	.calendar-top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.yearMonth{
		font-size: 12px;
		color: #666666;
		text-align: left;
		padding-top: 8px;
		padding-left: 15px;
		margin-bottom:10px;
	}
	.today-btn{
		width: 39px;
		height: 20px;
		line-height: 20px;
		border-radius: 60px;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #EEEEEE;
		font-size: 10px;
		color: #666666;
		cursor: pointer;
		margin-right: 5px;
	}
	.weekdays{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom:10px;
		font-size: 14px;
		color: #666666;
	}
	.days-item{
		height:46px;
		line-height:46px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 14px;
		font-weight: bold;
		color: #3D3D3D;
	}
	.time-normal{
		cursor: pointer;
		width: 37px;
		height: 46px;
	}
	.time-active{
		width: 37px;
		height: 46px;
		border-radius: 4px;
		background: linear-gradient(332deg, #2CA7FF -8%, #69BBFF 58%, #90D5FF 112%);
		cursor: pointer;
		display: block;
	}
	i.dots{
		width: 6px;
		height: 6px;
		border-radius: 6px;
		background: linear-gradient(180deg, #FFB00E 0%, #FF683F 100%);
		display: block;
		margin: 0 auto;
		margin-top: -13px;
	}
	.operate-arrow{
	
	}
	.operate-arrow i {
		color: #90A7FF;
		font-weight: bold;
		cursor: pointer;
		position: absolute;
		top:79px;
	}
	i.ope-left{
		left:5px;
	}
	i.ope-right{
		right:5px;
	}