Vue.jsとMoment.jsでカレンダーを作る
Published in
2 min readMar 5, 2019
掲題の通りですが、業務でVue.jsとMoment.jsを使ってカレンダーを作る機会があったのでその実装をメモしておきます。
それぞれ、
- Vue 2.5
- Moment 2.23
のバージョンで実施しました。
forを使いたくない病にかかっているので配列の処理はmapとfilterだけで実装しています。
少し解説すると、
- カレンダーの週の行ごとの日付要素が入った配列を持つ二次元配列を生成してtemplateに渡す構造となっています。
data
に現在月から相対的にプラス/マイナスの数値を持つcurrent
の値を定義しています。current
はmethods
のgoNextMonth
goPrevMonth
メソッドによって変動します。- それ以外の値は
current
に連動して変動するものであり、直接変更することのないRead Onlyな値としたいためcomputed
に定義しています。
このように動作させることができました。