组件效果
首先
npm install lunar-calendar
父组件： 不要忘记组件的引入和注册
<div v-if="calendarShow">
<CalendarMy ref="calendarMy" :whichClick="whichClick"
:calendarShow="calendarShow" :xinDate="xinDate" @calendarSelect="calendarSelect" />
</div>
子组件
<template>
<div v-if="calendarShow" class="showPop">
<div class="popBox">
<div class="calendar">
<div class="headerPop">
<!-- 上一年 -->
<div class="boxIcon" @click="preYears"> <i class="el-icon-d-arrow-left"></i> </div>
<!-- 上一月 -->
<div class="boxIcon" @click="preMonths"> <i class="el-icon-arrow-left"></i> </div>
{{years+ '-' +myMonths}}
<!-- 下一月 -->
<div class="boxIcon" @click="nextMonths"> <i class="el-icon-arrow-right"></i> </div>
<!-- 下一年 -->
<div class="boxIcon" @click="nextYears"> <i class="el-icon-d-arrow-right"></i> </div>
<el-button @click="btnClose" size="small" round style="float: right" icon="el-icon-close"></el-button>
</div>
<div class="header">
<div class="weekdays">
<span v-for="day in weekdays" :key="day" class="weekday">{{ day }}</span>
</div>
</div>
<div class="body">
<div v-for="(item, index) in days" :key="item.day" class="day">
<p v-if="item.type == 2 && newType != '3'" class="dayView red">
{{ item.day }}
</p>
<p v-else class="dayView" @click="dayClick(item.day)" :class="{'green': item.day === newType}">{{ item.day }}</p>
<p class="lunarView" @click="getDetails(item.lunarYear, item.lunarMonthName, item.lunarDayName, item.day)">{{ item.lunarDayName}}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import LunarCalendar from 'lunar-calendar';
export default {
props: {
calendarShow: {//组件重新挂载
type: Boolean,
default: false
},
xinDate: {//新历选择:1 农历选择:2
type: [String,Number]
}
},
data() {
return {
date: new Date(), // 当前日期
weekdays: ['日', '一', '二', '三', '四', '五', '六'], // 一周的日期（中文）
days: [], // 当前月份的日期列表（按照中国日历形式）
rows: [],
newType: '',
years: new Date().getFullYear(),
months: new Date().getMonth() + 1,
myMonths: new Date().getMonth() + 1,
myDay: new Date().getDate(),
oldDate: '',
};
},
computed: {},
mounted() {
let date = new Date();
if(this.months < 10){
this.months = '0' + this.months;
}
this.calendarData(date.getFullYear(), date.getMonth() + 1, date.getDate())
},
methods: {
//向父组件抛出的方法
emitFunc(){
let objDate = {
newDate: '',
oldDate: ''
};
if(this.xinDate == 1){
objDate = {
newDate: this.years + '-' + this.myMonths + '-' + (Number(this.newType)),
oldDate: ''
};
}
if(this.xinDate == 2){
objDate = {
newDate: this.years + '-' + this.myMonths + '-' + (Number(this.newType)),
oldDate: this.oldDate
};
}
setTimeout(()=>{
this.$emit('calendarSelect', objDate);
}, 1000)
},
//当前新历点击
dayClick( newType){
this.newType = newType;
this.emitFunc();
},
//关闭按钮
btnClose(){
this.$emit('calendarSelect', '');
},
//当前农历点击
getDetails(y, m, d, dd) {
this.$message.warning(d);
this.oldDate = m + '-' + d
this.newType = dd;
console.log(y, m, d)
this.emitFunc();
},
//上一年
preYears(){
this.calendarData(this.years - 1, this.months, this.myDay)
},
//上一月
preMonths(){
if(this.months -1 == 0){
this.months = 13
this.years = this.years - 1
}
this.calendarData(this.years, this.months - 1, this.myDay)
},
//下一月
nextMonths(){
if(this.months + 1 == 13){
this.months = 0
this.years = this.years + 1
}
this.calendarData(this.years, this.months + 1, this.myDay)
},
//下一年
nextYears(){
this.calendarData(this.years + 1, this.months, this.myDay)
},
calendarData(years, months, days) {
console.log(years, months, days);
this.years = years;
this.months = months;
this.myMonths = months < 10 ? '0' + months: months;
this.myDay = days;
const year = years;
const month = months;
const calendar = LunarCalendar.calendar(year, month);
let time = new Date(`${years}-${months}-${days}`)
let timeList = calendar.monthData
// 判断当月1号是礼拜几
time.setDate(1)
for (let i = 0; i < time.getDay(); i++) {
timeList.unshift({
is_punch: false,
})
}
this.days = timeList
this.getAjax()
},
getAjax() {
let date = new Date();
let years = date.getFullYear();
let arr = [];
for (let i = 0; i < this.rows.length; i++) {
let dateTime = this.rows[i].createdate.replace(/-/g, "/");
let date = new Date(dateTime);
this.rows[i].day = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
arr.push({
day: this.rows[i].day
});
}
let arry = this.days
for (let j = 0; j < arry.length; j++) {
if (arry[j].year == new Date().getFullYear() && arry[j].month == new Date().getMonth() + 1 && arry[j].day == new Date().getDate()) {
arry[j].type = 2
}
}
this.days = arry
},
}
};
</script>
<style lang="scss" scoped>
.headerPop{
height: 55px;
text-align: center;
font-size: 18px;
padding: 14px;
color: #000;
background: #fff;
position: sticky;
width: 100%;
top: 0;
z-index: 5;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
.showPop{
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0,0,0, 0.1);
z-index: 99;
transition: transform 0.25s linear, -webkit-transform 0.25s linear;
}
.popBox{
background: #fff;
z-index: 999;
position: fixed;
left: 0;
right: 0;
bottom: -20px;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
.boxIcon{
display: inline-block;
width: 40px;
height: 40px;
}
.calendar {
display: flex;
flex-direction: column;
max-width: 600px;
margin: 0 auto;
}
.header {
background-color: #f5f5f5;
padding: 10px;
}
.weekdays {
display: flex;
flex-direction: row;
font-size: 14px;
}
.body {
padding: 10px;
display: flex;
flex-flow: row wrap;
}
.weekday {
width: 53px;
text-align: center;
}
.day {
width: 53px;
height: 70px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 5px;
.dayView {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
overflow: hidden;
}
.lunarView {
margin-top: 3px;
font-size: 10px;
color: #aaa;
width: 100%;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.green {
background: #3175c8;
color: #fff;
font-weight: bold;
}
.red {
background: red;
color: #fff;
font-weight: bold;
}
}
</style>
引入地址：blog.csdn.net/hql1024/art…
还有另外一种用的是： yunshui-calendar
安装 npm install yunshui-calendar
git地址：https://gitee.com/my-name-wj/yunshui-calendar/tree/master
