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。

相关文章

C#实现将Excel表格转换为图片(JPG/ PNG)

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
基于Java实现回调监听工具类

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先，会用到 函数式接口 Consumer, 通过这个可以解耦回调方法，下面先写一个
阅读更多...
使用Java将DOCX文档解析为Markdown文档的代码实现

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown（MD）因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析
阅读更多...
Qt中QGroupBox控件的实现

Qt中QGroupBox控件的实现

《Qt中QGroupBox控件的实现》QGroupBox是Qt框架中一个非常有用的控件,它主要用于组织和管理一组相关的控件,本文主要介绍了Qt中QGroupBox控件的实现,具有一定的参考价值,感兴趣... 目录引言一、基本属性二、常用方法2.1 构造函数 2.2 设置标题2.3 设置复选框模式2.4 是否
阅读更多...
C++使用printf语句实现进制转换的示例代码

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符（formatspecifier）快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指
阅读更多...
springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

《springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法》：本文主要介绍springboot整合阿里云百炼DeepSeek实现sse流式打印,本文给大家介绍的非常详细,对大... 目录1.开通阿里云百炼,获取到key2.新建SpringBoot项目3.工具类4.启动类5.测试类6.测
阅读更多...
pytorch自动求梯度autograd的实现

pytorch自动求梯度autograd的实现

《pytorch自动求梯度autograd的实现》autograd是一个自动微分引擎,它可以自动计算张量的梯度,本文主要介绍了pytorch自动求梯度autograd的实现,具有一定的参考价值,感兴趣... autograd是pytorch构建神经网络的核心。在 PyTorch 中，结合以下代码例子，当你
阅读更多...
SpringBoot集成Milvus实现数据增删改查功能

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2