05 calendar header / カレンダー実装

[hasyrails]

現状

• 日付表示が「年/月」ではない

実装点

• 日付表示が「年/月」ではない
• 月移動ボタンをナビバーにする
• ヘッダースタイリング

[hasyrails]

日付表示を変更

 name: 'Calendar',
   data() {
     return {
-      currentDate: moment(),
+      currentDate: moment().format('YYYY/M'),
     };
   },

表記変更成功

[hasyrails]

月移動ボタンをArrowボタンに変更する

vue-material-design-icons

$ yarn add vue-material-design-icons

月移動ボタンを置き換え

<template>
-    <button @click="prevMonth">前の月</button>
+    <ChevronLeft @click="prevMonth"></ChevronLeft>

-    <button @click="nextMonth">次の月</button>
+    <ChevronRight @click="nextMonth"></ChevronRight>
</tamplate>

<script>
import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue';
import ChevronRight from 'vue-material-design-icons/ChevronRight.vue';

components: {
    ChevronLeft,
    ChevronRight
  },
</script>

[hasyrails]

月移動をした時、表記が変わってしまう

変更

 nextMonth() {
-      this.currentDate = moment(this.currentDate).add(1, "month");
+      this.currentDate = moment(this.currentDate).add(1, "month").format('YYYY/MM');
       this.getCalendar();
     },
     prevMonth() {
-      this.currentDate = moment(this.currentDate).subtract(1, "month");
+      this.currentDate = moment(this.currentDate).subtract(1, "month").format('YYYY/MM');
       this.getCalendar();
     },

解消

月が切り替わっても同じ表記

[hasyrails]

ヘッダースタイリング

カレンダーヘッダーを

<    2020/9    >

横並びにしたい CSSの基本！横並びなどフレキシブルに対応する「Flexボックス」

カレンダーの日付部分のスタイリング

カレンダーの日付の部分は

text-align :center;

では中央に寄らない ブロックや画像を中央寄せする

ヘッダーの文字

<ChevronLeft fillColor="white"  @click="prevMonth"></ChevronLeft>

fillColor