カスタムカレンダーコンポーネントVUEに基づいて、

この記事はあなたを助けるために、あなたの場合は時間の無駄は、私は申し訳ありませんならば、私は光栄されるだろう。
希望私のような人たちを助けるために、最も簡単な方言を使用します。何かが間違っがあれば、私も誤解を招く、あなたを誤解しないように、指摘してください。

githubのプロジェクトアドレス

オンラインデモ住所

これらの手順を実行します。

1、インストールパッケージ

cnpm I

2、実行DEV

NPM実行DEV

プロジェクトディレクトリ：

 

 

 

カスタムルナフェスティバル：

yinli_festival.json

{
   "01-06"： "第1カレンダー" 、
   "01-10" "カレンダー第2" 、
   "01-15" "カレンダーセクション3" 、
   "02から07"： "カレンダーセクション7" 、
   " 3月3日、 "："セクション8カレンダー" " 04-07 "："カレンダー12日目" " 4月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" 、
   "1月17日"： "グレゴリオ項4" 、
   " 01から22 "："グレゴリオ部5 " " 02-01 "："グレゴリオ部6 " " 02-05 "："グレゴリオ部7 " " 03から03 "："グレゴリオセクション8 " " 03- 16 "："グレゴリオセクション9 " " 03から18 "："グレゴリオ10日" " 3月28日"："グレゴリオ11日目" " 04-04 "："グレゴリオ暦12日" " 04から08」 ：「グレゴリオ・フェスティバル13」、
  「04から14」：「グレゴリオ・フェスティバル14」、
   "4月15日"： "グレゴリオ第15" 
}

デフォルトの休日の表示優先度：

calendar.vue

<！ -先展示阴历节日- > 
<divのクラス= "テキスト" V- 場合 = "child.eventName =未定義！"：クラス= "{ 'isGregorianFestival'：child.eventName =未定義！}"> {{ child.eventName}} </ div> 
< -再展示阳历节日！ - > 
<divのクラス= "テキスト" V- 他 - の場合 = "child.yangeventName =未定義！"：クラス= "{ 'isLunarFestival'： child.yangeventName、 'isGregorianFestival'：child.isGregorianFestival} "> {{child.yangeventName}} </ div> 
<！ -再展示默认节日- > 
<divのクラス="テキスト"V- 他 - の場合 =" child.lunar =未定義！ "：クラス=" { 'isLunarFestival'：child.isLunarFestival、 'isGregorianFestival'：子。} isGregorianFestival "> child.lunar {{}} </ div> 
<！ -もう一度立証月の日付- > 
<divのクラス="テキスト「V- 他 -もし = "child.lunarValue！=未定義"> {{child.lunarValue}} </ div>

レンダリング：