如果本文幫助到你，本人不勝榮幸，如果浪費了你的時間，本人深感抱歉。
項目線上demo：https://my.weblf.cn/lf_demo/others/rili_list
項目結構：
rili.vue
<template>
<div class="rili">
<rili />
</div>
</template>
<script>
import rili from './calendar/app'
export default {
components: { rili },
data () {
return {
}
},
async mounted () {
}
}
</script>
yinli_festival.json
{
"01-06":"陰曆節1",
"01-10":"陰曆節2",
"01-15":"陰曆節3",
"02-07":"陰曆節7",
"03-03":"陰曆節8",
"04-07":"陰曆節12",
"04-12":"陰曆節16",
"04-08":"陰曆節17",
"05-07":"陰曆節18",
"05-17":"陰曆節21",
"05-28":"陰曆節22",
"06-09":"陰曆節24",
"11-20":"陰曆節54",
"11-21":"陰曆節55",
"12-18":"陰曆節58",
"12-19":"陰曆節59",
"12-27":"陰曆節62",
"12-20":"陰曆節63"
}
陽曆文件格式相同
app.vue
<template>
<div id="calendar-page">
<div class="list_box" v-if="isShow">
<div class="today_time">
今日日期：{{value}}
</div>
<p class="otitle1">日程表</p>
<div class="festival_detail" v-for="(item,index) in yangli_arr" :key="index" :class="{'able_festival':space_festival(item.yangli)}">
<p>陽曆：{{item.yangli}}</p>
<p>陰曆：{{toLunar(value[0],value[1],value[2])}}</p>
<p>節日：{{item.jieri}}</p>
<p>節日狀態：{{space_festival(item.yangli)?'距離:'+space_festival(item.yangli)+'天':'已過'}}</p>
</div>
</div>
</div>
</template>
<script>
import foli from './yinli_festival.json' // 獲取陰曆節日表
import yangli from './yangli_festival.json' // 獲取陽曆節日表
export default {
name: 'app',
components: {
},
data () {
return {
value: [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()], // 默認日期
events: {},
month: new Date().getMonth() + 1, // 當前月
timestamp: Date.now(), // 當前時間戳
timeYear: new Date().getFullYear(), // 當前年
MIN_YEAR: 1891,
MAX_YEAR: 2100,
lunarInfo: [ // 農曆轉換表
[0, 2, 9, 21936], [6, 1, 30, 9656], [0, 2, 17, 9584], [0, 2, 6, 21168], [5, 1, 26, 43344], [0, 2, 13, 59728],
[0, 2, 2, 27296], [3, 1, 22, 44368], [0, 2, 10, 43856], [8, 1, 30, 19304], [0, 2, 19, 19168], [0, 2, 8, 42352],
[5, 1, 29, 21096], [0, 2, 16, 53856], [0, 2, 4, 55632], [4, 1, 25, 27304], [0, 2, 13, 22176], [0, 2, 2, 39632],
[2, 1, 22, 19176], [0, 2, 10, 19168], [6, 1, 30, 42200], [0, 2, 18, 42192], [0, 2, 6, 53840], [5, 1, 26, 54568],
[0, 2, 14, 46400], [0, 2, 3, 54944], [2, 1, 23, 38608], [0, 2, 11, 38320], [7, 2, 1, 18872], [0, 2, 20, 18800],
[0, 2, 8, 42160], [5, 1, 28, 45656], [0, 2, 16, 27216], [0, 2, 5, 27968], [4, 1, 24, 44456], [0, 2, 13, 11104],
[0, 2, 2, 38256], [2, 1, 23, 18808], [0, 2, 10, 18800], [6, 1, 30, 25776], [0, 2, 17, 54432], [0, 2, 6, 59984],
[5, 1, 26, 27976], [0, 2, 14, 23248], [0, 2, 4, 11104], [3, 1, 24, 37744], [0, 2, 11, 37600], [7, 1, 31, 51560],
[0, 2, 19, 51536], [0, 2, 8, 54432], [6, 1, 27, 55888], [0, 2, 15, 46416], [0, 2, 5, 22176], [4, 1, 25, 43736],
[0, 2, 13, 9680], [0, 2, 2, 37584], [2, 1, 22, 51544], [0, 2, 10, 43344], [7, 1, 29, 46248], [0, 2, 17, 27808],
[0, 2, 6, 46416], [5, 1, 27, 21928], [0, 2, 14, 19872], [0, 2, 3, 42416], [3, 1, 24, 21176], [0, 2, 12, 21168],
[8, 1, 31, 43344], [0, 2, 18, 59728], [0, 2, 8, 27296], [6, 1, 28, 44368], [0, 2, 15, 43856], [0, 2, 5, 19296],
[4, 1, 25, 42352], [0, 2, 13, 42352], [0, 2, 2, 21088], [3, 1, 21, 59696], [0, 2, 9, 55632], [7, 1, 30, 23208],
[0, 2, 17, 22176], [0, 2, 6, 38608], [5, 1, 27, 19176], [0, 2, 15, 19152], [0, 2, 3, 42192], [4, 1, 23, 53864],
[0, 2, 11, 53840], [8, 1, 31, 54568], [0, 2, 18, 46400], [0, 2, 7, 46752], [6, 1, 28, 38608], [0, 2, 16, 38320],
[0, 2, 5, 18864], [4, 1, 25, 42168], [0, 2, 13, 42160], [10, 2, 2, 45656], [0, 2, 20, 27216], [0, 2, 9, 27968],
[6, 1, 29, 44448], [0, 2, 17, 43872], [0, 2, 6, 38256], [5, 1, 27, 18808], [0, 2, 15, 18800], [0, 2, 4, 25776],
[3, 1, 23, 27216], [0, 2, 10, 59984], [8, 1, 31, 27432], [0, 2, 19, 23232], [0, 2, 7, 43872], [5, 1, 28, 37736],
[0, 2, 16, 37600], [0, 2, 5, 51552], [4, 1, 24, 54440], [0, 2, 12, 54432], [0, 2, 1, 55888], [2, 1, 22, 23208],
[0, 2, 9, 22176], [7, 1, 29, 43736], [0, 2, 18, 9680], [0, 2, 7, 37584], [5, 1, 26, 51544], [0, 2, 14, 43344],
[0, 2, 3, 46240], [4, 1, 23, 46416], [0, 2, 10, 44368], [9, 1, 31, 21928], [0, 2, 19, 19360], [0, 2, 8, 42416],
[6, 1, 28, 21176], [0, 2, 16, 21168], [0, 2, 5, 43312], [4, 1, 25, 29864], [0, 2, 12, 27296], [0, 2, 1, 44368],
[2, 1, 22, 19880], [0, 2, 10, 19296], [6, 1, 29, 42352], [0, 2, 17, 42208], [0, 2, 6, 53856], [5, 1, 26, 59696],
[0, 2, 13, 54576], [0, 2, 3, 23200], [3, 1, 23, 27472], [0, 2, 11, 38608], [11, 1, 31, 19176], [0, 2, 19, 19152],
[0, 2, 8, 42192], [6, 1, 28, 53848], [0, 2, 15, 53840], [0, 2, 4, 54560], [5, 1, 24, 55968], [0, 2, 12, 46496],
[0, 2, 1, 22224], [2, 1, 22, 19160], [0, 2, 10, 18864], [7, 1, 30, 42168], [0, 2, 17, 42160], [0, 2, 6, 43600],
[5, 1, 26, 46376], [0, 2, 14, 27936], [0, 2, 2, 44448], [3, 1, 23, 21936], [0, 2, 11, 37744], [8, 2, 1, 18808],
[0, 2, 19, 18800], [0, 2, 8, 25776], [6, 1, 28, 27216], [0, 2, 15, 59984], [0, 2, 4, 27424], [4, 1, 24, 43872],
[0, 2, 12, 43744], [0, 2, 2, 37600], [3, 1, 21, 51568], [0, 2, 9, 51552], [7, 1, 29, 54440], [0, 2, 17, 54432],
[0, 2, 5, 55888], [5, 1, 26, 23208], [0, 2, 14, 22176], [0, 2, 3, 42704], [4, 1, 23, 21224], [0, 2, 11, 21200],
[8, 1, 31, 43352], [0, 2, 19, 43344], [0, 2, 7, 46240], [6, 1, 27, 46416], [0, 2, 15, 44368], [0, 2, 5, 21920],
[4, 1, 24, 42448], [0, 2, 12, 42416], [0, 2, 2, 21168], [3, 1, 22, 43320], [0, 2, 9, 26928], [7, 1, 29, 29336],
[0, 2, 17, 27296], [0, 2, 6, 44368], [5, 1, 26, 19880], [0, 2, 14, 19296], [0, 2, 3, 42352], [4, 1, 24, 21104],
[0, 2, 10, 53856], [8, 1, 30, 59696], [0, 2, 18, 54560], [0, 2, 7, 55968], [6, 1, 27, 27472], [0, 2, 15, 22224],
[0, 2, 5, 19168], [4, 1, 25, 42216], [0, 2, 12, 42192], [0, 2, 1, 53584], [2, 1, 21, 55592], [0, 2, 9, 54560]
],
isShow: false, // 是否顯示列表
tipText: '', // 節日描述
tip_arr: [],
rili_yin: '', // 當前農曆
yangli_arr: [] // 陽曆數組
}
},
watch: {
timeYear (curVal, oldVal) {
this.value = [this.timeYear, this.month, 15]
this.isShow = false
this.events = {}
this.transTime()
}
},
methods: {
// 切換月
selectMonth (month, year) {
this.timeYear = year
this.month = month
},
// 切換年
selectYear (year) {
this.timeYear = year
},
// 轉換農曆
toLunar (year, month, day) {
var yearData = this.lunarInfo[year - this.MIN_YEAR]
if (year == this.MIN_YEAR && month <= 2 && day <= 9) {
return [1891, 1, 1, '辛卯', '兔', '正月', '初一']
}
return this.lunarByBetween(year, this.betweenSolarDays(year, month, day, yearData[1], yearData[2]))
},
// 還有多少天過節
space_festival (fes_yangli) {
let tamp_1 = Date.parse(fes_yangli.replace(/-/gi, '/'))
let cha = tamp_1 * 1 - this.timestamp * 1
if (cha > 0) {
return parseInt(cha / (1000 * 60 * 60 * 24))
} else {
return false
}
},
// 轉換公曆
// @param year 陰曆-年
// @param month 陰曆-月，閏月處理：例如如果當年閏五月，那麼第二個五月就傳六月，相當於陰曆有13個月
// @param date 陰曆-日
toSolar (year, month, day) {
var yearData = this.lunarInfo[year - this.MIN_YEAR]
var between = this.betweenLunarDays(year, month, day)
var u = navigator.userAgent
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios終端
var ms
if (isiOS) {
ms = new Date(year + '/' + yearData[1] + '/' + yearData[2]).getTime()
} else {
ms = new Date(year + '-' + yearData[1] + '-' + yearData[2]).getTime()
}
var s = ms + between * 24 * 60 * 60 * 1000
var d = new Date()
d.setTime(s)
year = d.getFullYear()
month = d.getMonth() + 1
day = d.getDate()
return [year, this.zeroPad(month), this.zeroPad(day)]
},
// 是否閏年
isLeapYear (year) {
return ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))
},
// 天干地支年
lunarYear (year) {
var gan = ['庚', '辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己']
var zhi = ['申', '酉', '戌', '亥', '子', '醜', '寅', '卯', '辰', '巳', '午', '未']
var str = year.toString().split('')
return gan[str[3]] + zhi[year % 12]
},
// 生肖年
zodiacYear (year) {
var zodiac = ['猴', '雞', '狗', '豬', '鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊']
return zodiac[year % 12]
},
// 農曆月份天數數組
lunarMonths (year) {
var yearData = this.lunarInfo[year - this.MIN_YEAR]
var leapMonth = yearData[0]
var bit = (+yearData[3]).toString(2)
var months = []
for (var i = 0; i < bit.length; i++) {
months[i] = bit.substr(i, 1)
}
for (var k = 0, len = 16 - months.length; k < len; k++) {
months.unshift('0')
}
months = months.slice(0, (leapMonth == 0 ? 12 : 13))
for (var i = 0; i < months.length; i++) {
months[i] = +months[i] + 29
}
return months
},
// 農曆每年的天數
// @param year 農曆年份
lunarYearDays (year) {
var monthArray = this.lunarYearMonths(year)
var len = monthArray.length
return (monthArray[len - 1] == 0 ? monthArray[len - 2] : monthArray[len - 1])
},
lunarYearMonths (year) {
var monthData = this.lunarMonths(year)
var res = []
var temp = 0
var yearData = this.lunarInfo[year - this.MIN_YEAR]
var len = (yearData[0] == 0 ? 12 : 13)
for (var i = 0; i < len; i++) {
temp = 0
for (let j = 0; j <= i; j++) {
temp += monthData[j]
}
res.push(temp)
}
return res
},
// 獲取閏月
// @param year 農曆年份
leapMonth (year) {
var yearData = this.lunarInfo[year - this.MIN_YEAR]
return yearData[0]
},
// 計算農曆日期與正月初一相隔的天數
betweenLunarDays (year, month, day) {
var yearMonth = this.lunarMonths(year)
var res = 0
for (var i = 1; i < month; i++) {
res += yearMonth[i - 1]
}
res += day - 1
return res
},
// 計算2個陽曆日期之間的天數
// @param year 陽曆年
// @param month
// @param day
// @param l_month 陰曆正月對應的陽曆月份
// @param l_day 陰曆初一對應的陽曆天
betweenSolarDays (year, month, day, l_month, l_day) {
var time1 = new Date(year + '/' + month + '/' + day).getTime()
var time2 = new Date(year + '/' + l_month + '/' + l_day).getTime()
return Math.ceil((time1 - time2) / 24 / 3600 / 1000)
},
// 根據距離正月初一的天數計算陰曆日期
// @param year 陽曆年
// @param between 天數
lunarByBetween (year, between) {
var lunarArray = []
var yearMonth = []
var t = 0
var e = 0
var leapMonth = 0
var m = ''
if (between == 0) {
t = 1
e = 1
m = '正月'
} else {
year = between > 0 ? year : (year - 1)
yearMonth = this.lunarYearMonths(year)
leapMonth = this.leapMonth(year)
between = between > 0 ? between : (this.lunarYearDays(year) + between)
for (var i = 0; i < 13; i++) {
if (between == yearMonth[i]) {
t = i + 2
e = 1
break
} else if (between < yearMonth[i]) {
t = i + 1
e = between - ((yearMonth[i - 1]) ? yearMonth[i - 1] : 0) + 1
break
}
}
m = (leapMonth != 0 && t == leapMonth + 1)
? ('閏'.this.chineseMonth(t - 1))
: this.chineseMonth(((leapMonth != 0 && leapMonth + 1 < t) ? (t - 1) : t))
}
lunarArray.push(year, t, e) // 年 月 日
lunarArray.push(this.lunarYear(year),
this.zodiacYear(year),
m,
this.chineseNumber(e)) // 天干地支年 生肖年 月份 日
lunarArray.push(leapMonth) // 閏幾月
return lunarArray
},
// 中文月份
chineseMonth (month) {
var monthHash = ['', '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '臘月']
return monthHash[month]
},
// 中文日期
chineseNumber (num) {
var dateHash = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
var res = ''
if (num <= 10) {
res = '初' + dateHash[num]
} else if (num > 10 && num < 20) {
res = '十' + dateHash[num - 10]
} else if (num == 20) {
res = '二十'
} else if (num > 20 && num < 30) {
res = '廿' + dateHash[num - 20]
} else if (num == 30) {
res = '三十'
}
return res
},
// 日期補零
zeroPad (n) {
return String(n < 10 ? '0' + n : n)
},
// 遍歷陰曆中的日期 將農曆轉化爲公曆
transTime () {
this.yangli_arr = []
Object.keys(foli).forEach(element => {
let y = `${this.timeYear}-${element}`// 拼接年月日
let times = y.split('-')// 將年，月，日轉爲數組
let y1 = this.toSolar(this.timeYear, times[1], times[2]).join('-')
this.events[y1] = foli[element]// 節日名稱
let obj = {
yangli: y1,
jieri: foli[element]
}
this.yangli_arr.push(obj)
})
setTimeout(() => {
this.isShow = true
}, 200)
}
},
created () {
this.transTime()
},
mounted () {
}
}
</script>
<style lang="scss">
#calendar-page{
width: 100%;
.list_box{
.festival_detail{
margin-top: 20px;
background: #ccc;
padding: 10px;
&.able_festival{
background: orange;
}
}
}
}
</style>
結果預覽：
