VUE Calendar 用VUE+ElementUI实现带农历 节气 节日 日期的日历

农历 节气 节日 日历 vue Calendar

nodejs v16.20.2 npm v8.19.4

vue-cli vue v2.6.14

element-ui v2.15.14

npm install -g @vue/cli
// OR
yarn global add @vue/clivue create my-project
//  OR
vue ui

npm i element-ui -S
# OR
yarn add element-ui 

目录结构

package.json

{"name": "vue-element-calendar","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","test:unit": "vue-cli-service test:unit","test:e2e": "vue-cli-service test:e2e","lint": "vue-cli-service lint"},"dependencies": {"axios": "^1.6.2","core-js": "^3.8.3","element-ui": "2.15.14","lodash": "^4.17.21","lunar": "^0.0.3","lunar-javascript": "^1.6.7","moment": "^2.29.4","vue": "^2.6.14","vue-router": "^3.5.1","vuex": "^3.6.2"},"devDependencies": {"@babel/core": "^7.12.16","@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-e2e-cypress": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-plugin-unit-jest": "~5.0.0","@vue/cli-plugin-vuex": "~5.0.0","@vue/cli-service": "~5.0.0","@vue/test-utils": "^1.1.3","@vue/vue2-jest": "^27.0.0-alpha.2","babel-jest": "^27.0.6","cypress": "^9.7.0","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","jest": "^27.0.5","sass": "^1.32.7","sass-loader": "^12.0.0","vue-template-compiler": "^2.6.14"}
}

代码 main.js

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = falseVue.use(ElementUI);new Vue({router,store,render: h => h(App)
}).$mount('#app')

代码 App.vue

<template><div id="app"><nav><router-link to="/">HOME</router-link> |<router-link to="/about">ABOUT</router-link></nav><router-view/></div>
</template><style lang="scss">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;a {font-weight: bold;color: #2c3e50;&.router-link-exact-active {color: #42b983;}}
}
</style>

代码AboutView.vue

<template><div class="about"><a href="https://nodejs.org/" target="_blank">nodejs v16.20.2 npm v8.19.4</a><br /><a href="https://cli.vuejs.org/" target="_blank">vue-cli</a><br /><a href="https://v2.cn.vuejs.org/" target="_blank">vue v2.6.14</a><br /><a href="https://element.eleme.io/#/zh-CN" target="_blank">Element UI v2.15.14</a></div>
</template>

代码 HomeView.vue

<template><div class="home"><!-- HomeView --><HelloWorld msg="Welcome to Your Vue.js App"/><section><el-button @click="preY">上一年</el-button><el-button @click="nexY">下一年</el-button><el-calendar v-model="value" ref="ec"><template #dateCell="{ date, data }">
<!--          <div>{{ date }}</div>--><el-tooltip class="item" effect="dark" placement="top-start" :open-delay="0"><div slot="content" style="max-width: 300px;line-height: 20px">{{ lunarcalendar(date) }}</div><div class="wh100"><div>{{ data.day }}</div><div>{{ lunarcalendar1(date) }}</div><div>{{ funcTraditionalFestival(getLunarYMD('y',date), getLunarYMD('m',date), getLunarYMD('d',date)) }}</div><div v-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 /src
import HelloWorld from '@/components/HelloWorld.vue'
import moment from "moment"
import lunar from "lunar-javascript"
import { worldHolidays } from "@/utils/worldHolidays"
export default {name: 'HomeView',components: {HelloWorld},data() {return {date: moment(new Date()),value: null}},methods: {preY() {// month 接受从 0 到 11 的数字。 如果超出范围，它将冒泡到年份。this.funcY('-')},nexY() {this.funcY('+')},funcY(_symbol) {let t,yif (_symbol === '+') {y = this.date.year() + 1} else if (_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><style scoped lang="scss">
.wh100 {width: 100%;height: 100%;
}
</style>

src/utils/worldHolidays.js

export const 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' },]
]

localhost:8080/

localhost:8080/about