vuejs-datepickerを使い、祝日を認識させて色を変えたい

Question

前提・実現したいこと

https://unpkg.com/vuejs-datepickerを読み込んで、
カレンダーで日付を指定するボックスを設置しています。

祝日を自動認識して色を変えたいのですが、調べても
jQuery ui Datepicker
のやり方しか出てきません。。
(私の調査不足もあるかも知れないですが。。)

現在入力しているソースコード

          <vuejs-datepicker :highlighted="highlighted":value="this.default":format="DatePickerFormat":language="ja" id="datepicker" class="form-control date-input" id="inputDate">
          </vuejs-datepicker>
        </div>

        <script>
        var dateapp = new Vue({
          el: '#dateapp',
          data: {
            default: new Date(),
            DatePickerFormat: 'yyyy-MM-dd',
            ja: vdp_translation_ja.js,
            highlighted: {
              days: [6, 0],
            }
          },
          components: {
            'vuejs-datepicker':vuejsDatepicker
          },
          });
         </script>

よろしくお願いいたします。

Answer 1

私も同様にどうにかならないかと検索しましたが、
やり方がヒットしないため力技ではありますが、
下記にてひとまず解決しております。

// 祝日の日付をリストアップ（日本の休日で検索して設定）
const holiday_lists = ['01-01','01-10','02-11','02-23','03-21','04-29','05-03','05-04','05-05','07-18','08-11','09-19','09-23','10-10','11-03','11-23'];

// 祝日をカレンダーに表示する年数の設定
const years={start:2022,end:2030};

// 祝日を上記で設定した分だけ作成
const creat_holiday= [];
const holiday = [];
for ( var i = years.start; i<=years.end; i++) {
  creat_holiday.push(holiday_lists.map(function(days){
    return holiday.push(new Date(i+'-'+days));
  }));
}

//...省略...
 highlighted: {
  days: [6, 0],
  dates: holiday, //←作成した祝日を反映
 }

上記で該当の祝日に【highlighted】のクラスが付与されるので、
CSSにて調整は可能です。

もし祝日に追加や変更があれば、
holiday_lists=[]の中身を追加・変更のみで問題ないかと思います。

ご参考になれば幸いです。