本投稿は TECOTEC Advent Calendar 2020 の15日目の記事です。
はじめまして、決済認証システム開発事業部の下江です。
アドベント"カレンダー"ということで、プロジェクト開発で用いたVueJSの便利なカレンダーライブラリ、V-Calendarについて紹介していこうと思います。
※本記事で取り扱うのはver2.0.0になります。
V-Calendarとは
アメリカの開発者Nathan Reyesさんが立ち上げた多機能なカレンダーのオープンソースプロジェクトになります。ライセンスはMITです。
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
他にも色々と機能はありますが、この辺で。
何方かの開発の一助となれば幸いです。