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应用中的实现过程

分布式锁在Spring Boot应用中的实现过程

《分布式锁在SpringBoot应用中的实现过程》文章介绍在SpringBoot中通过自定义Lock注解、LockAspect切面和RedisLockUtils工具类实现分布式锁,确保多实例并发操作... 目录Lock注解LockASPect切面RedisLockUtils工具类总结在现代微服务架构中，分布
阅读更多...
Java使用Thumbnailator库实现图片处理与压缩功能

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的
阅读更多...
Python使用Tenacity一行代码实现自动重试详解

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门：一行代码实现优雅重试精细控制：让重试按我
阅读更多...
Redis客户端连接机制的实现方案

Redis客户端连接机制的实现方案

《Redis客户端连接机制的实现方案》本文主要介绍了Redis客户端连接机制的实现方案,包括事件驱动模型、非阻塞I/O处理、连接池应用及配置优化,具有一定的参考价值,感兴趣的可以了解一下... 目录1. Redis连接模型概述2. 连接建立过程详解2.1 连php接初始化流程2.2 关键配置参数3. 最大连
阅读更多...
Python实现网格交易策略的过程

Python实现网格交易策略的过程

《Python实现网格交易策略的过程》本文讲解Python网格交易策略,利用ccxt获取加密货币数据及backtrader回测,通过设定网格节点,低买高卖获利,适合震荡行情,下面跟我一起看看我们的第一... 网格交易是一种经典的量化交易策略，其核心思想是在价格上下预设多个“网格”，当价格触发特定网格时执行买
阅读更多...
python设置环境变量路径实现过程

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法：临时设置（Windows用`set`,Linux/macOS用`export`）、永久设置（系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量（适用于当前会话）永久设置环境变量（Windows系统
阅读更多...
Python对接支付宝支付之使用AliPay实现的详细操作指南

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali
阅读更多...
Spring Security 单点登录与自动登录机制的实现原理

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录（SSO）与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录（SSO）1.2 自动登录（Remember Me）二、代码分析三、
阅读更多...
PyCharm中配置PyQt的实现步骤

PyCharm中配置PyQt的实现步骤

《PyCharm中配置PyQt的实现步骤》PyCharm是JetBrains推出的一款强大的PythonIDE,结合PyQt可以进行pythion高效开发桌面GUI应用程序,本文就来介绍一下PyCha... 目录1. 安装China编程PyQt1.PyQt 核心组件2. 基础 PyQt 应用程序结构3. 使用 Q
阅读更多...
Python实现批量提取BLF文件时间戳

Python实现批量提取BLF文件时间戳

《Python实现批量提取BLF文件时间戳》BLF（BinaryLoggingFormat）作为Vector公司推出的CAN总线数据记录格式,被广泛用于存储车辆通信数据,本文将使用Python轻松提取... 目录一、为什么需要批量处理 BLF 文件二、核心代码解析：从文件遍历到数据导出1. 环境准备与依赖库
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2