基于vue的自定义日历组件

Posted linfblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于vue的自定义日历组件相关的知识,希望对你有一定的参考价值。

如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。
希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误,请一定指出,以免误导大家、也误导我。

项目github地址

线上demo地址

使用步骤:

1、安装包

cnpm i

2、运行dev

npm run dev

项目目录:

技术图片

 

 

 

自定义农历节日:

yinli_festival.json

{
  "01-06":"阴历节1",
  "01-10":"阴历节2",
  "01-15":"阴历节3",
  "02-07":"阴历节7",
  "03-03":"阴历节8",
  "04-07":"阴历节12",
  "04-12":"阴历节16",
  "04-08":"阴历节17",
  "05-07":"阴历节18",
  "05-17":"阴历节21",
  "05-28":"阴历节22",
  "06-09":"阴历节24"
}

自定义阳历节日:

yangli_festival.json

{
  "01-05":"阳历节1",
  "01-09":"阳历节2",
  "01-12":"阳历节3",
  "01-17":"阳历节4",
  "01-22":"阳历节5",
  "02-01":"阳历节6",
  "02-05":"阳历节7",
  "03-03":"阳历节8",
  "03-16":"阳历节9",
  "03-18":"阳历节10",
  "03-28":"阳历节11",
  "04-04":"阳历节12",
  "04-08":"阳历节13",
  "04-14":"阳历节14",
  "04-15":"阳历节15"
}

默认节日显示优先级:

calendar.vue

<!-- 先展示阴历节日 -->
<div class="text" v-if="child.eventName!=undefined" :class="{‘isGregorianFestival‘:child.eventName!=undefined}">{{child.eventName}}</div>
<!-- 再展示阳历节日 -->
<div class="text" v-else-if="child.yangeventName!=undefined" :class="{‘isLunarFestival‘:child.yangeventName,‘isGregorianFestival‘:child.isGregorianFestival}">{{child.yangeventName}}</div>
<!-- 再展示默认节日 -->
<div class="text" v-else-if="child.lunar!=undefined" :class="{‘isLunarFestival‘:child.isLunarFestival,‘isGregorianFestival‘:child.isGregorianFestival}">{{child.lunar}}</div>
<!-- 再展示阴历日期 -->
<div class="text" v-else-if="child.lunarValue!=undefined">{{child.lunarValue}}</div>

效果图:

技术图片

以上是关于基于vue的自定义日历组件的主要内容,如果未能解决你的问题,请参考以下文章

vue日历(农历)组件

vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

Vue自定义日历组件

基于Vue2-Calendar改进的日历组件(含中文使用说明)

Vue.js横向日历组件