<template><divclass="home"><!-- HomeView --><HelloWorldmsg="Welcome to Your Vue.js App"/><section><el-button@click="preY">上一年</el-button><el-button@click="nexY">下一年</el-button><el-calendarv-model="value"ref="ec"><template#dateCell="{ date, data }"><!-- <div>{{ date }}</div>--><el-tooltipclass="item"effect="dark"placement="top-start":open-delay="0"><divslot="content"style="max-width: 300px;line-height: 20px">{{ lunarcalendar(date) }}</div><divclass="wh100"><div>{{ data.day }}</div><div>{{ lunarcalendar1(date) }}</div><div>{{ funcTraditionalFestival(getLunarYMD('y',date), getLunarYMD('m',date), getLunarYMD('d',date)) }}</div><divv-html="funcTraditionalFestival1(getLunarYMD('y',date), getLunarYMD('m',date), getLunarYMD('d',date)) + solarTerms(getLunarYMD('y',date), getLunarYMD('m',date), getLunarYMD('d',date))"></div><div>{{ funcFestival(+data.day.split('-')[1], +data.day.split('-')[2]) }}</div></div></el-tooltip></template></el-calendar></section></div></template><script>// @ is an alias to /srcimport HelloWorld from'@/components/HelloWorld.vue'import moment from"moment"import lunar from"lunar-javascript"import{ worldHolidays }from"@/utils/worldHolidays"exportdefault{name:'HomeView',components:{
HelloWorld
},data(){return{date:moment(newDate()),value:null}},methods:{preY(){// month 接受从 0 到 11 的数字。 如果超出范围,它将冒泡到年份。this.funcY('-')},nexY(){this.funcY('+')},funcY(_symbol){let t,y
if(_symbol ==='+'){
y =this.date.year()+1}elseif(_symbol ==='-'){
y =this.date.year()-1}
t =moment(`${ y }-${moment().month()+1}-${moment().date()}`)this.value =this.funcToDate(t)this.funcSynchronous(t)},funcToDate(_moment){return _moment.toDate()},funcSynchronous(_t){this.date =moment(_t.toDate())},lunarcalendar(ymd){return lunar.Solar.fromDate(ymd).getLunar().toFullString()},lunarcalendar1(ymd){return lunar.Solar.fromDate(ymd).getLunar().toString().split('年')[1]},funcTraditionalFestival(_y, _m, _d){return lunar.Lunar.fromYmd(+_y,+_m,+_d).getFestivals()[0]? lunar.Lunar.fromYmd(+_y,+_m,+_d).getFestivals()[0]:''},funcTraditionalFestival1(_y, _m, _d){return lunar.Lunar.fromYmd(+_y,+_m,+_d).getOtherFestivals()[0]? lunar.Lunar.fromYmd(+_y,+_m,+_d).getOtherFestivals()[0]:''},solarTerms(_y, _m, _d){var d = lunar.Lunar.fromYmd(_y, _m, _d);let jq = d.getJieQi();return jq ?'<span style="color: orangered">'+ jq +'</span>'+' '+ d.getJieQiTable()[jq].toYmdHms().match(/\d\d:\d\d:\d\d/gi)[0]:'';},getLunarYMD(type, t1){let t, d1 = lunar.Lunar.fromDate(t1)switch(type){case'y':
t = d1.getYear()breakcase'm':
t = d1.getMonth()breakcase'd':
t = d1.getDay()breakdefault:}return t
},funcFestival(m, d){let festival = worldHolidays.find(i=> i.month === m && i.day === d)return festival ? festival.name :''}},mounted(){this.value =this.funcToDate(this.date)
console.log(this.$refs.ec)
console.log(worldHolidays)}}</script><stylescopedlang="scss">.wh100{width: 100%;height: 100%;}</style>
src/utils/worldHolidays.js
exportconst worldHolidays =[{month:1,day:1,name:'元旦'},// New Year's Day{month:2,day:14,name:'情人节'},// Valentine's Day{month:3,day:8,name:'妇女节'},// International Women's Day{month:3,day:17,name:'圣帕特里克节'},// St. Patrick's Day{month:4,day:1,name:'愚人节'},// April Fools' Day{month:4,day:22,name:'地球日'},// Earth Day{month:5,day:1,name:'劳动节'},// International Workers' Day{month:5,day:5,name:'五月五日'},// Cinco de Mayo{month:7,day:4,name:'独立日'},// Independence Day{month:9,day:21,name:'国际和平日'},// International Day of Peace{month:11,day:11,name:'光棍节'},// Remembrance Day{month:12,day:25,name:'圣诞节'},// Christmas Day...[{month:3,day:17,name:'圣帕特里克节'},// St. Patrick's Day{month:4,day:22,name:'地球日'},// Earth Day{month:5,day:1,name:'劳动节'},// International Workers' Day{month:5,day:5,name:'五月五日'},// Cinco de Mayo{month:7,day:4,name:'独立日'},// Independence Day{month:9,day:21,name:'国际和平日'},// International Day of Peace{month:12,day:25,name:'圣诞节'},// Christmas Day],...[{month:4,day:22,name:'地球日'},// Earth Day{month:5,day:1,name:'劳动节'},// International Workers' Day{month:5,day:5,name:'五月五日'},// Cinco de Mayo{month:7,day:4,name:'独立日'},// Independence Day{month:9,day:21,name:'国际和平日'},// International Day of Peace{month:10,day:31,name:'万圣节'},// Halloween{month:11,day:11,name:'纪念日'},// Remembrance Day{month:12,day:24,name:'平安夜'},// Christmas Day{month:12,day:25,name:'圣诞节'},// Christmas Day// 更多的节日{month:2,day:4,name:'世界癌症日'},// World Cancer Day{month:3,day:21,name:'世界儿童诗歌日'},// World Poetry Day{month:4,day:23,name:'世界读书日'},// World Book Day{month:5,day:17,name:'国际电信日'},// World Telecommunication Day{month:6,day:5,name:'世界环境日'},// World Environment Day{month:8,day:19,name:'世界人道主义日'},// World Humanitarian Day{month:10,day:16,name:'世界粮食日'},// World Food Day// 更多的节日{month:3,day:14,name:'白色情人节'},// White Day{month:4,day:23,name:'圣乔治节'},// St. George's Day{month:6,day:1,name:'儿童节'},// Children's Day{month:8,day:15,name:'军人节'},// Victory over Japan Day{month:11,day:1,name:'诗歌日'},// All Saints' Day// 更多的节日{month:7,day:14,name:'法国国庆日'},// Bastille Day{month:10,day:3,name:'德国统一日'},// German Unity Day{month:11,day:5,name:'英国炮火节'},// Guy Fawkes Night{month:12,day:26,name:'节礼日'},// Boxing Day// 继续添加更多的节日// { month: X, day: X, name: 'XXXX' },],...[{month:1,day:7,name:'圣诞节'},// Christmas (Orthodox){month:1,day:14,name:'泰米尔新年'},// Pongal (Tamil New Year){month:1,day:25,name:'澳大利亚日'},// Australia Day{month:2,day:1,name:'国际儿童日'},// International Children's Day{month:2,day:25,name:'解放日'},// Kuwait Liberation Day{month:3,day:1,name:'独立日'},// Independence Day (Bosnia and Herzegovina){month:3,day:8,name:'妇女节'},// International Women's Day{month:3,day:17,name:'圣帕特里克节'},// St. Patrick's Day{month:3,day:21,name:'纳米比亚独立日'},// Namibia Independence Day{month:4,day:7,name:'卫塞节'},// Day of Genocide Against the Tutsi (Rwanda){month:4,day:14,name:'锡克节'},// Baisakhi (Sikh New Year){month:4,day:24,name:'亚美尼亚大屠杀纪念日'},// Armenian Genocide Remembrance Day{month:5,day:1,name:'国际劳动节'},// International Workers' Day{month:5,day:17,name:'挪威宪法日'},// Norwegian Constitution Day{month:6,day:6,name:'诺曼底登陆日'},// D-Day (Normandy Landings){month:6,day:24,name:'圣约翰节'},// St John's Day (Midsummer){month:7,day:1,name:'加拿大日'},// Canada Day{month:7,day:4,name:'独立日'},// Independence Day (United States){month:7,day:14,name:'法国国庆日'},// Bastille Day{month:8,day:15,name:'印度独立日'},// Indian Independence Day{month:9,day:2,name:'印尼独立日'},// Indonesian Independence Day{month:10,day:1,name:'国庆节'},// National Day (China){month:10,day:3,name:'德国统一日'},// German Unity Day{month:11,day:1,name:'墨西哥万圣节'},// Day of the Dead (Mexico){month:11,day:11,name:'退伍军人节'},// Armistice Day (Remembrance Day){month:12,day:1,name:'世界爱滋病日'},// World AIDS Day{month:12,day:16,name:'南非日'},// Day of Reconciliation (South Africa){month:12,day:26,name:'节礼日'},// Boxing Day{month:12,day:31,name:'跨年夜'},// New Year's Eve{month:5,day:4,name:'青年节'},{month:8,day:1,name:'建军节'},{month:9,day:10,name:'教师节'},{month:7,day:1,name:'党的生日'},// 继续添加更多的节日// { month: X, day: X, name: 'XXXX' },]]