element日历插件获取显示的第一天和最后一天

和重置日期内容显示

需求是要传入当前显示的第一天和最后一天来获取范围，再判断某个日期是否有内容标记

已知星期排版是固定的，第一天是星期天，最后一天是星期六。通过当月1号和最后一天再往前推算需要展示上个月几天，和下个月几天。

// 获取日历显示时间范围
const getRange = (date) => {
	// 日历第一天
	let firstDay = '';
	// 日历最后一天
	let lastDay = '';
	// 今天
	const today = date ? date : new Date()
	// 上月
	const m = today.getMonth()
	// 本月
	const cm = m + 1
	// 下月
	const lm = m + 2 > 12 ? 1 : m + 2
	// 要显示的本月
	const currentMonth = cm < 10 ? '0' + cm : cm
	// 要显示的本本年
	const currentYear = today.getFullYear()
	// 要显示的上个月的年份，m = 0 则当前1月，上月则是去年12月
	const prevYear = m == 0 ? currentYear - 1 : currentYear
	const prevMonth = m == 0 ? 12 : m < 10 ? '0' + m : m
	// 上个月天数
	const pmd = new Date(prevYear, m, 0).getDate()
	// 下个月的年份，当前12月，则需要加一年
	const lastYear = cm + 1 > 12 ? currentYear + 1 : currentYear
	const lastMonth = lm < 10 ? '0' + lm : lm
	// 1号是周几
	const firstWeek = new Date(today.setDate(1)).getDay()
	// 如果是周日，则不需要显示上个月
	if (firstWeek == 0) {
		firstDay = `${currentYear}-${currentMonth}-01`
	}
	// 其他周几，对应用上个月的天数往前推算
	else {
		firstDay = `${prevYear}-${prevMonth}-${pmd - (firstWeek - 1)}`
	}
	// 这个月天数
	const currentMonthDate = new Date(currentYear, cm, 0).getDate()
	// 最后一天是周几
	const lastWeek = new Date(today.setDate(currentMonthDate)).getDay()
	// 周六显示当月最后一天
	if (lastWeek == 6) {
		lastDay = `${currentYear}-${currentMonth}-${currentMonthDate}`
	}
	// 其他周几，对应往后推算
	else {
		const day = ['06', '05', '04', '03', '02', '01']
		lastDay = `${lastYear}-${lastMonth}-${day[lastWeek]}`
	}
	console.log('第一天', firstDay)
	console.log('最后一天', lastDay)
}

这个日历插件右上角的按钮上个月下个月事件，切换后默认是那月1号，传入这个时间就可以重新获得切换后的月份的时间范围，用v-model绑定切换后的数据

<el-calendar v-model="calendar">
	<template #date-cell="{ data }">
		<el-popover v-if="list[data.day]" placement="top-start" :width="200" trigger="hover" :content="list[data.day].workCalendar.content">
			<template #reference>
				<div class="date-cont" @click="handleOpen(data), list[data.day]">
					{{ data.day.split('-')[2] }}
				    <el-icon>
						<Star />
				    </el-icon>
				</div>
			</template>
		</el-popover>
		<p v-else class="date-cont" @click="handleOpen(data)">
			{{ data.day.split('-')[2] }}
		</p>
	</template>
</el-calendar>

watch监听变动来做事件

// 获取当前点击上下月按钮后的变化
watch(calendar, (n, o) => {
	if (n.getFullYear() !== o.getFullYear() || n.getMonth() !== o.getMonth()) {
		getRange(n)
	}
});