1.首先根据头部导航显示历史的六天时间,旁边点击日历icon出现日历组件
2.日历页面显示两个月份,当前月及上月,我这里将日历分为了三块:上月,中间月,下月。
日历组件index.vue:
<template>
<div id="calendar">
<calendarHeader
@handlePrevMonth = 'getPrevMonth'
@handleNextMonth = 'getNextMonth'
@handleToday = 'handleToday'
@selectDate = 'selectDate'
@cancle="cancle"
/>
<div class="date-title" >
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div class="calendar-container" style="height:36rem;" v-on:scroll="scrollDebounce">
<!-- 上一个月 'signBg':sign==i -->
<div class="date-container premonth">
<div class="date-header">{
{
`${
preDivCalendar.year}年${
preDivCalendar.month}月` }}</div>
<div class="date-board">
<!-- 判断某月的第一天是星期几 start -->
<div v-for="i in new Date(preDivCalendar.year, (preDivCalendar.month-1), 1).getDay()" :key="-i"></div>
<!-- 判断某月的第一天是星期几 end -->
<div class="date-block"
:class=" {
'todayBlock': isCurrentDay(i,preDivCalendar.month,preDivCalendar.year),
'futureBg':isFutureDay(i,preDivCalendar.month,preDivCalendar.year),
'signBg':isSignBg(i,preDivCalendar.month,preDivCalendar.year),
}"
@click="handleClickDay(i,preDivCalendar.month,preDivCalendar.year)"
v-for="i in preCalendarList"
:key="i">
<span class="solar">{
{
i }}</span>
<p class="lunar" :class="{
'signBg':isSignBg(i,preDivCalendar.month,preDivCalendar.year),
'futureBg':isFutureDay(i,preDivCalendar.month,preDivCalendar.year),
}">{
{
preLunarList[i]}}</p>
<span :class="{
'no-report-status':isHistory(i,preDivCalendar.month,preDivCalendar.year),
'reported-status':isReported(i,preDivCalendar.month,preDivCalendar.year)
}"></span>
</div>
</div>
</div>
<!-- 中间一个月 -->
<div class="date-container middlemonth">
<div class="date-header">{
{
`${
middleDivCalendar.year}年${
middleDivCalendar.month}月` }}</div>
<div class="date-board">
<!-- 判断某月的第一天是星期几 start -->
<div v-for="i in new Date(middleDivCalendar.year, (middleDivCalendar.month-1), 1).getDay()" :key="-i"></div>
<!-- 判断某月的第一天是星期几 end -->
<div class="date-block"
:class="{
'todayBlock': isCurrentDay(i,middleDivCalendar.month,middleDivCalendar.year),
'futureBg':isFutureDay(i,middleDivCalendar.month,middleDivCalendar.year),
'signBg':isSignBg(i,middleDivCalendar.month,middleDivCalendar.year),
'selectBg':isSelectDay(i,middleDivCalendar.month,middleDivCalendar.year)
}"
@click="handleClickDay(i, middleDivCalendar.month,middleDivCalendar.year)"
v-for="i in currentCalendarList"
:key="i">
<span class="solar">{
{
i }}</span>
<p class="lunar" :class="{
'signBg':isSignBg(i,middleDivCalendar.month,middleDivCalendar.year),
'futureBg':isFutureDay(i,middleDivCalendar.month,middleDivCalendar.year),
}">{
{
currentLunarList[i]}}</p>
<span :class="{
'no-report-status':isHistory(i,middleDivCalendar.month,middleDivCalendar.year),
'reported-status':isReported(i,middleDivCalendar.month,middleDivCalendar.year)
}"></span>
</div>
</div>
</div>
<!-- 下一个月 :class="{todayBlock: i === 1}" -->
<div class="date-container nextmonth">
<div class="date-header">{
{
`${
nextMiddleDivCalendar.year}年${
nextMiddleDivCalendar.month}月` }}</div>
<div class="date-board">
<!-- 判断某月的第一天是星期几 start -->
<div v-for="i in new Date(nextMiddleDivCalendar.year, (nextMiddleDivCalendar.month-1), 1).getDay()" :key="-i"></div>
<!-- 判断某月的第一天是星期几 end -->
<div class="date-block"
:class="{
'todayBlock': isCurrentDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
'futureBg':isFutureDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
'signBg':isSignBg(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
}"
@click="handleClickDay(i, nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)"
v-for="i in nextCalendarList"
:key="i">
<span class="solar">{
{
i }}</span>
<p class="lunar" :class="{
'signBg':isSignBg(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
'futureBg':isFutureDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)
}">{
{
nextLunarList[i]}}</p>
<span :class="{
'no-report-status':isHistory(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
'reported-status':isReported(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)
}"></span>
</div>
</div>
</div>
</div>
</div>
</template>
日历组件的JavaScript,显示的农历有些问题待更新,显示农历的方法在百度上面有很多,大家可以结合我的去调整。
export default {
components: {
calendarHeader
},
props:{
middleDate:{
type:Object
},
unitProjectId:{
type:Number
}
},
data () {
return {
scrollTimer: null, // 滚动定时器,用于滚动事件防抖动
// preDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()}, // 第一个div显示的日历
// middleDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()+1}, // 中间div显示的日历
// nextMiddleDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()+2}, // 最后一个div显示的日历
preDivCalendar: {
}, // 第一个div显示的日历
middleDivCalendar: {
}, // 中间div显示的日历
nextMiddleDivCalendar: {
}, // 最后一个div显示的日历
preCalendarList:[],
currentCalendarList:[],
nextCalendarList:[],
selectDay:{
},
clickDay:{
},
dailyCalendarStatusList:[],
dailyReportStatusList:[],
preLunarList:[],//上月农历日期
currentLunarList:[],//中间农历日期
nextLunarList:[],//下月农历日期
}
},
created(){
this.preDivCalendar = {
year: this.middleDate.year, month: this.middleDate.month-1}
this.middleDivCalendar = {
year: this.middleDate.year, month: this.middleDate.month};
// this.middleDivCalendar = this.middleDate;
this.nextMiddleDivCalendar = {
year: this.middleDate.year, month: this.middleDate.month+1}
this.handleClickDay1(this.middleDate.date,this.middleDate.month,this.middleDate.year)
this.preCalendarList = this.getMonthDayByMonthYear(this.preDivCalendar.month, this.preDivCalendar.year)
this.currentCalendarList = this.getMonthDayByMonthYear (this.middleDivCalendar.month, this.middleDivCalendar.year)
this.nextCalendarList = this.getMonthDayByMonthYear (this.nextMiddleDivCalendar.month, this.nextMiddleDivCalendar.year)
},
mounted () {
// this.middleDivCalendar = {year: new Date().getFullYear(), month: new Date().getMonth()+1}
// this.middleDivCalendar = {year: this.middleDate.year, month: this.mi