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

2023-11-30 08:30
文章标签 javascript 实现 vue frontend elementui 日历 日期 节日 节气 calendar 农历

本文主要是介绍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

目录结构

directoryStructure.png

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/

calendar.png

localhost:8080/about

about.png

这篇关于VUE Calendar 用VUE+ElementUI实现带农历 节气 节日 日期的日历的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/436334。

相关文章

Spring Boot 实现 IP 限流的原理、实践与利弊解析

Spring Boot 实现 IP 限流的原理、实践与利弊解析

《SpringBoot实现IP限流的原理、实践与利弊解析》在SpringBoot中实现IP限流是一种简单而有效的方式来保障系统的稳定性和可用性,本文给大家介绍SpringBoot实现IP限... 目录一、引言二、IP 限流原理2.1 令牌桶算法2.2 漏桶算法三、使用场景3.1 防止恶意攻击3.2 控制资源
阅读更多...
springboot下载接口限速功能实现

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解（简化） 四、关键代码详解1️⃣ 设置
阅读更多...
Nginx 配置跨域的实现及常见问题解决

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享（CORS）2. Nginx 配置跨域的场景2.1
阅读更多...
Python中提取文件名扩展名的多种方法实现

Python中提取文件名扩展名的多种方法实现

《Python中提取文件名扩展名的多种方法实现》在Python编程中,经常会遇到需要从文件名中提取扩展名的场景,Python提供了多种方法来实现这一功能,不同方法适用于不同的场景和需求,包括os.pa... 目录技术背景实现步骤方法一：使用os.path.splitext方法二：使用pathlib模块方法三
阅读更多...
CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需... 目录 css Anchor Positioning：重新定义「锚定定位」的时代来了！ 什么是 Anchor Pos
阅读更多...
CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
Java实现删除文件中的指定内容

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2