Vue.jsとMoment.jsでカレンダーを作る

掲題の通りですが、業務でVue.jsとMoment.jsを使ってカレンダーを作る機会があったのでその実装をメモしておきます。

それぞれ、

• Vue 2.5
• Moment 2.23

のバージョンで実施しました。

forを使いたくない病にかかっているので配列の処理はmapとfilterだけで実装しています。

少し解説すると、

• カレンダーの週の行ごとの日付要素が入った配列を持つ二次元配列を生成してtemplateに渡す構造となっています。
• data に現在月から相対的にプラス/マイナスの数値を持つ current の値を定義しています。 current は methods の goNextMonth goPrevMonth メソッドによって変動します。
• それ以外の値は current に連動して変動するものであり、直接変更することのないRead Onlyな値としたいため computed に定義しています。

このように動作させることができました。