vue.js 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/cli

vue 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 = false

Vue.use(ElementUI);

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

代码 App.vue

代码AboutView.vue

代码 HomeView.vue

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

文章链接

 您阅读本篇文章共花了：