组件代码
<template>
<div class="air-calendar-box">
<table class="sn-calendar-table">
<thead>
<th class="fc-day-header">日</th>
<th class="fc-day-header">一</th>
<th class="fc-day-header">二</th>
<th class="fc-day-header">三</th>
<th class="fc-day-header">四</th>
<th class="fc-day-header">五</th>
<th class="fc-day-header">六</th>
</thead>
<tbody>
<tr>
<td
v-for="(item, idx) in calendarData"
:key="idx"
:style="{'height': height}"
:class="{
'include': item.include,
'active': activeData && item.date === activeData.date
}"
@click="clickDay(item)">
<slot name="day" :row="item">
<div class="day">
{{ item.day2 }}
</div>
</slot>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'AirCalendarBox',
props: {
type: {
// all 可选中显示的所有日期 portion 只能选中当前月份的数据
type: String,
default: 'portion'
},
// 默认值
defaultMonth: {
type: Date,
default () {
let year = new Date().getFullYear() // 当月年份
let month = new Date().getMonth() + 1 // 当月月份
return new Date(year, month - 1, 1)
}
},
height: {
type: String,
default: '52px'
}
},
watch: {
defaultMonth () {
this.setDefaultValue()
this.getCalendarDay()
}
},
data () {
return {
calendarData: [],
activeData: null
}
},
created () {
this.getCalendarDay()
},
methods: {
// 获取日历天数
getCalendarDay () {
let year = new Date(this.defaultMonth).getFullYear() // 当月年份
let month = new Date(this.defaultMonth).getMonth() + 1 // 当月月份
let days = new Date(year, month, 0).getDate() // 当月天数
let prevYear = month === 1 ? (year - 1) : year // 上一年年份
let prevMonth = month === 1 ? 12 : (month - 1) // 上月月份
let prevDays = new Date(prevYear, prevMonth, 0).getDate() // 上一月天数
let lastYear = month === 12 ? (year + 1) : year // 下一年年份
let lastMonth = month === 12 ? 1 : (month + 1) // 下月月份
// let lastDays = new Date(lastYear, lastMonth, 0).getDate() // 下一月天数
let prevMonthArr = [] // 上月数据
let nextMonthArr = [] // 下月数据
let currentMonthArr = [] // 当月数据
// 判断当月1号是星期几
let firstDay = new Date(year, month - 1, 1).getDay()
// 获取显示上月的数据
for (let i = 0; i < firstDay; i++) {
let day = prevDays - firstDay + (i + 1)
let day2 = day >= 10 ? day : ('0' + day)
let month2 = prevMonth >= 10 ? prevMonth : ('0' + prevMonth)
prevMonthArr.push({
year: prevYear,
month: prevMonth,
month2: month2,
day: day,
day2: day2,
date: `${prevYear}-${prevMonth}-${day}`,
date2: `${prevYear}-${month2}-${day2}`,
include: false
})
}
// 获取显示的下一月的数据
for (let i = 0; i < (42 - firstDay - days); i++) {
let day = i + 1
let day2 = day >= 10 ? day : ('0' + day)
let month2 = lastMonth >= 10 ? lastMonth : ('0' + lastMonth)
nextMonthArr.push({
year: lastYear,
month: lastMonth,
month2: month2,
day: day,
day2: day2,
date: `${lastYear}-${lastMonth}-${day}`,
date2: `${lastYear}-${month2}-${day2}`,
include: false
})
}
// 获取当月显示数据
for (let i = 1; i <= days; i++) {
let day2 = i >= 10 ? i : ('0' + i)
let month2 = month >= 10 ? month : ('0' + month)
currentMonthArr.push({
year: year,
month: month,
month2: month2,
day: i,
day2: day2,
date: `${year}-${month}-${i}`,
date2: `${year}-${month2}-${day2}`,
include: true
})
}
this.calendarData = [...prevMonthArr, ...currentMonthArr, ...nextMonthArr]
},
// 设置默认值
setDefaultValue (date) {
if (!date) {
this.activeData = null
return
}
let year = new Date(date).getFullYear() // 当月年份
let month = new Date(date).getMonth() + 1 // 当月月份
let month2 = month >= 10 ? month : ('0' + month)
let day = new Date(date).getDate()
let day2 = day >= 10 ? day : '0' + day
let row = {
year: year,
month: month,
month2: month2,
day: day,
day2: day2,
date: `${year}-${month}-${day}`,
date2: `${year}-${month2}-${day2}`,
include: true
}
this.clickDay(row)
},
clickDay (row) {
if (this.type === 'portion' && !row.include) {
this.$message({
type: 'info',
message: '只能选择当前月份的日期'
})
return
}
this.activeData = { ...row }
this.$emit('click', { ...row })
}
}
}
</script>
<style lang="less" scoped>
.air-calendar-box {
.sn-calendar-table {
100%;
border-radius: 4px;
display: block;
overflow: hidden;
thead,
tbody {
display: flex;
100%;
}
tr {
100%;
}
th {
background:#D9F5F5;
height: 32px;
line-height: 32px;
text-align: center;
color: #3E597B;
box-sizing: border-box;
display: inline-block;
14.28%;
}
td {
14.28%;
display: inline-block;
position: relative;
font-size: 16px;
font-weight: 500;
box-sizing: border-box;
text-align: center;
cursor: pointer;
border: solid 2px transparent;
color: rgba(62, 89, 123, 0.3);
&.include {
color: #3E597B;
}
&.active {
border: 2px solid #00BBBB;
}
.day {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&:nth-child(1),
&:nth-child(7),
&:nth-child(8),
&:nth-child(14),
&:nth-child(15),
&:nth-child(21),
&:nth-child(22),
&:nth-child(28),
&:nth-child(29),
&:nth-child(35),
&:nth-child(36),
&:nth-child(42) {
background: #EBFAFA;
}
}
tbody {
.clickDay {
border: solid 2px #00BBBB;
}
}
}
}
</style>
// 页面效果
