Based on a custom calendar component vue

If this article to help you, I would be honored if a waste of your time, I am sorry.
Hope to use the most simple vernacular to help those people like me. If there is something wrong, be sure to point out, so as not to mislead you, I also misleading.

Github project address

Online demo Address

Steps for usage:

1, the installation package

cnpm i

2, run dev

npm run dev

Project directory:

 

 

 

Custom Lunar Festival:

yinli_festival.json

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

Custom Gregorian festival:

yangli_festival.json

{
   "01-05": "Gregorian Day 1" ,
   "01-09": "Gregorian Section 2" ,
   "01-12": "Gregorian Section 3" ,
   "01-17": "Gregorian Section 4" ,
   " 01-22 ":" Gregorian section 5 " ,
   " 02-01 ":" Gregorian section 6 " ,
   " 02-05 ":" Gregorian section 7 " ,
   " 03-03 ":" Gregorian section 8 " ,
   " 03- 16 ":" Gregorian section 9 " ,
   " 03-18 ":" Gregorian Day 10 " ,
   " 03-28 ":" Gregorian Day 11 " ,
   " 04-04 ":" Gregorian calendar Day 12 " ,
   " 04-08 " : "Gregorian Festival 13" ,
   "04-14": "Gregorian Festival 14",
   "04-15": "Gregorian Section 15" 
}

The default holiday display priority:

calendar.vue

<-! First show the lunar festival ->
<div class="text" v-if="child.eventName!=undefined" :class="{'isGregorianFestival':child.eventName!=undefined}">{{child.eventName}}</div>
<! - again demonstrated Gregorian Festival ->
<div class="text" v-else-if="child.yangeventName!=undefined" :class="{'isLunarFestival':child.yangeventName,'isGregorianFestival':child.isGregorianFestival}">{{child.yangeventName}}</div>
<! - and then show the default Festival ->
<div class="text" v-else-if="child.lunar!=undefined" :class="{'isLunarFestival':child.isLunarFestival,'isGregorianFestival':child.isGregorianFestival}">{{child.lunar}}</div>
<! - again demonstrated lunar date ->
<div class="text" v-else-if="child.lunarValue!=undefined">{{child.lunarValue}}</div>

Renderings: