vue日程管理 vue日历日程 日程提醒

展开时效果：

收起时效果：

主要功能

1、切换左右箭头切换月份
2、点击今天按钮：回到今天日期并选中查询接口
3、黄点代表有日程，点击选中，并且查询，下方对应展示日程内容，有数据则显示，无数据则显示暂无数据
4、点击某一日期，蓝色选中效果，并查询当前日期的数据 5、点击下拉箭头，展开或收起日程

具体代码实现：

<template>
	<div :class="[showAll == true ? 'active' : '','schedule-calendar']">
		<div class="calendar-box">
			<!-- 年月 -->
			<div class="calendar-top">
				<div class="yearMonth">
					{{ currentYear }}年{{ currentMonth }}月
				</div>
				<div class="today-btn" @click="toToday()">今天</div>
				<div class="operate-arrow">
					<i class="el-icon-arrow-left ope-left" @click="pickPre(currentYear,currentMonth)"></i>
					<i class="el-icon-arrow-right ope-right" @click="pickNext(currentYear,currentMonth)"></i>
				</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>
		<div :class="[arrowBottom == true ? 'active' : '','arrow-btn']" @click="btnClick">》</div>
		<!-- 日程数据列表 -->
		<div class="schedule-list" v-if="timeData.length" :style="calcScheduleHeght()"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				timeData:[],//存放日程数据
				currentYear: "",   // 年份
				currentMonth: "",  // 月份
				currentDay: "",    // 日期
				currentWeek: "",    // 星期
				days: [],
				selectedCur:null,//选中的当前日期index
				timeNow:"",//今日
				curShow:true,//今日默认选中效果
				dateCur:null,//选中的当前日期
				showAll:false,//默认折叠
				arrowBottom:false,//折叠按钮默认折叠状态
				defaultTimes:""//今日（年+月+01）
			}
		}，
		mounted() {
			this.getCurrentDate() // 获取当前时间
			this.initData(this.defaultTimes)//初始化days列表数据
			this.dateCur = this.timeNow
			this.getScheduleData(this.defaultTimes)//选中的日期（年+月+01）去查询日程接口
		}，
		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.defaultTimes)
				this.dateCur = this.timeNow
				this.getScheduleData(this.dateCur)
				this.showAll = true
				this.arrowBottom = true
			},
			// 日期相关
			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}`;
			},
			//年+月+01
			defaultTime(){
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
							
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}-01`;
			},
			getCurrentDate() {
				this.timeNow = this.getDate({
					format: true
				})
				console.log("今日：",this.timeNow)
				this.defaultTimes = this.defaultTime({
					format: true
				})
				console.log("今日（年+月+01）：",this.defaultTimes)
			},
			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)
				} 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<= 35- this.currentWeek; i += 1) {
					const d = new Date(str)
					d.setDate(d.getDate() + i)
					this.days.push(d)
				}
			},
			 // 上一個月   传入当前年份和月份
			pickPre (year, month) {
				const d = new Date(this.formatDate(year, month, 1))
				d.setDate(0)
				this.dateCur = this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
				this.initData(this.dateCur)
				this.getScheduleData(this.dateCur)
				// 点击上月时把点击选中清空
				this.selectedCur = null
			},
			// 下一個月   传入当前年份和月份
			pickNext (year, month) {
				const d = new Date(this.formatDate(year, month, 1))
				d.setDate(35)
				this.dateCur = this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
				this.initData(this.dateCur)
				this.getScheduleData(this.dateCur)
				// 点击下月时把点击选中清空
				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)
			},
			//折叠按钮点击
			btnClick(){
				if(this.showAll == false){
					this.showAll = true
					this.arrowBottom = true
				}else{
					this.showAll = false
					this.arrowBottom = false
				}
			}，
			//动态计算盒子高度
			calcScheduleHeght(){
				if(window.innerHeight < 832){
					return { height: '200px' };
				}else{
					if(this.showAll == false){
						return { height: `calc( 100% - 170px)`};
					}else{
						return { height: `calc( 100% - 355px)`};
					}
				}
			}
		}
	}
</script>

样式

/* 日程 */
	.schedule-calendar{
		background: #ECF6FF;
		border-radius: 8px;
		height: 123px;
		margin-bottom:10px;
		overflow:hidden;
		position: relative;
	}
	.schedule-calendar.active{
		height: 305px;
	}
	.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;
	}
	.yearMonth{
		font-size: 12px;
		color: #666666;
		text-align: left;
		padding-top: 8px;
		padding-left: 15px;
		margin-bottom:10px;
		text-align: center;
	}
	.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;
		position:absolute;
		top:7px;
		right:7px;
	}
	.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;
		flex-wrap: wrap;
	}
	.time-normal{
		cursor: pointer;
		width: 14%;
		height: 46px;
		padding: 0 14px 0 14px;
		box-sizing: border-box;
	}
	.time-active{
		width: 37px;
		height: 46px;
		border-radius: 4px;
		background: linear-gradient(332deg, #2CA7FF -8%, #69BBFF 58%, #90D5FF 112%);
		cursor: pointer;
		display: block;
		margin: 0 auto;
	}
	.arrow-btn{
		position: absolute;
		bottom: 0;
		left: 50%;
		margin: 0 auto;
		margin-left:-2%;
		cursor: pointer;
		width: 25px;
		height: 25px;
		text-align:center;
		transform: rotate(90deg);
		transition:all 0.4s ease 0s;
	}
	.arrow-btn.active{
		transform: rotate(-90deg);
	}
	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 i {
		color: #90A7FF;
		font-weight: bold;
		cursor: pointer;
		position: absolute;
		top:9px;
	}
	i.ope-left{
		left:180px;
	}
	i.ope-right{
		right:166px;
	}