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

目录结构

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

Vue.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,y
      if (_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()
          break
        case 'm':
          t = d1.getMonth()
          break
        case 'd':
          t = d1.getDay()
          break
        default:
      }
      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

最后编辑于：2023.11.28 21:41:24

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,723评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,080评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,604评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,440评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,431评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,499评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,893评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,541评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,751评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,547评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,619评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,320评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,890评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,896评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,137评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,796评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,335评论 2赞 342

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

目录结构

package.json

代码 main.js

代码 App.vue

代码AboutView.vue

代码 HomeView.vue

src/utils/worldHolidays.js

localhost:8080/

localhost:8080/about

推荐阅读更多精彩内容

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

农历节气节日日历 vue Calendar