VueJS製カレンダーライブラリV-Calendarのご紹介

本投稿は TECOTEC Advent Calendar 2020 の15日目の記事です。

はじめまして、決済認証システム開発事業部の下江です。

アドベント"カレンダー"ということで、プロジェクト開発で用いたVueJSの便利なカレンダーライブラリ、V-Calendarについて紹介していこうと思います。

※本記事で取り扱うのはver2.0.0になります。

V-Calendarとは

　アメリカの開発者Nathan Reyesさんが立ち上げた多機能なカレンダーのオープンソースプロジェクトになります。ライセンスはMITです。

github.com

documentは以下にまとまっています。 vcalendar.io

  • versionによって機能の追加及び削除が頻繁に行われており、利用できない記述が多々残っている
  • 日本語記事も利用できない記述が多くなっている
  • 同ライブラリに含まれているv-date-pickerの記述か v-calendarの記述か見分けが付きづらい

といった点で少し分かりにくさも有り、良い機会なので利用法をまとめて記事にしようかなということで今回記事を書かせていただきました。

機能説明を見るよりも動作サンプルを触ったほうが早い！！という方は最後に動作サンプルを置いていますのでそちらをどうぞ。

導入

こちらは、documentの通り

 npm -i v-calendar

で導入できます。 本記事とverを合わせる場合は

 npm -i v-calendar@2.0.0

としてください。

標準設定

#html 
  <div id='app'>
    <v-calendar
      :attributes="attributes"
    ></v-calendar>
  </div>

#vue
  new Vue({
    el: '#app',
    data: {
      attributes: 
      [
       {
          highlight: {
            color:'blue',
            fillMode: 'solid',
          },
          dates: [
          　'2020-12-15'
          ],
          popover: {
             label: 'アドカレ担当日',
          },
        },
      ],
    }
  })

これで以下のような表示となります。

Edit fiddle - JSFiddle - Code Playground

解説

強調表示

上記コードで

  highlight: {
     color:'blue',
     fillMode: 'solid',
  },

となっている部分
highlightの他にdot,barが同様に設定できます。

color

Gray/Red/Orange/Yellow/Green/Teal/Blue/Indigo/Purple/Pink
上記10種の色に対応しています。

color

solid/light/none
上記3種の表示に対応しています。 　 任意色や形状を利用したい場合は後述のクラスの追加を利用してください。

対象日

上記コードで

  dates: [
    '2020-12-15'
  ],

となっている部分。
ここでは1日のみを選択していますが、複数日の選択も可能となっています。
また、下記記述により範囲全体を強調表現することも可能です。

  dates: [
     {
      start: new Date('2020-12-1'), 
      end: new Date('2020-12-25') 
     }
 ],

Edit fiddle - JSFiddle - Code Playground

文言

上記コードで

  popover: [
    label:'アドカレ担当日'
  ],

となっている部分。
labelを変えることで表示する文言を変更できます。

項目の追加

上記の記述では1つの強調表示のみでしたが、複数の強調を設定することももちろん可能です。 追加方法としては以下のようにattributesを追記します。

 attributes: [
        {
          highlight: {
            color:'blue',
            fillMode: 'solid',
          },
          dates: [
          　'2020-12-15'
          ],
          popover: {
             label: 'アドカレ担当日',
          },
        },
        //追記分
        {
          dot: {
            color:'red',
          },
          dates: [
          　'2020-12-14'
          ],
          popover: {
             label: '締め切り！！！',
          },
        },
  ],

これで複数の強調を設定することができました。

Edit fiddle - JSFiddle - Code Playground

クラスの追加

上記の標準で用意されたデザインのみで表現が不足する場合は、
colorと同様の手順で

  highlight: {
     class:'hogehoge',
  },

とすることで、強調要素に任意のクラスを割り当てることができます。
任意色や強調要素の形状を変更するのに利用できます。 また日付要素も

  highlight: {
     contentClass:'hogehoge',
  },

とすることで任意クラスを割り当てることができます。

多言語対応

面倒な事が多い多言語対応
V-Calendarでは最初から多くの言語に対応しているので

#html 
  <div id='app'>
    <v-calendar
      :locale = 'lang'
      :attributes="attributes"
    ></v-calendar>
  </div>

#html 
  new Vue({
  el: '#app',
  data: {
  　lang: 'en',
    attributes: 
    [
      /*省略*/
    ],
  }
})

と、:localeを設定すれば多言語対応は完了です。

Edit fiddle - JSFiddle - Code Playground

動作サンプル

今までの変更点を全部入れると以下のようなカレンダーが出来上がります。

Edit fiddle - JSFiddle - Code Playground

他にも色々と機能はありますが、この辺で。
何方かの開発の一助となれば幸いです。

www.tecotec.co.jp