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

ღ_2333

4461人浏览 · 2023-11-28 01:49:06

ღ_2333 · 2023-11-28 01:49:06 发布

农历节气节日日历 vue Calendar

nodejs v16.20.2 npm v8.19.4

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

<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/

localhost:8080/about

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^