VueでWEBアプリ(7)

今回の記事はV-Calenderでのカレンダーの実装についてです。

カレンダーの見た目が想定と違っており、苦戦の結果完全解決までは至っていませんが、記録として残しておきます。

前回カレンダーの実装がうまくいかなかったと書きましたが、一日たってもう一度起動してみると、表示されました。（前回主に参考にしたのは　こちら）

しかし画面の端いっぱいまでに表示されてしまっていました。

そこで、Access.vueを以下のように修正しました。

ちなみにAccess.vueは　こちらのチュートリアル での下層ページコンポーネントの作り方と同じです。

（もとはattrs:{　の上に　data: { を入れていました。）

<template>
 <section class="access">
 <AppBackgroundHolder :title="title"/>
 <v-app>
 <v-container>
 <div id='app'>
 <v-calendar 
 ></v-calendar> 
 </div> 
 </v-container>
 </v-app>
 </section>
</template>
<script>
import AppBackgroundHolder from './AppBackgroundHolder.vue'
 
export default {
 data () {
 return {
 title: 'Access',
 focus: '',
 el: '#app',
 attrs: [
          {
 key: 'today',
 highlight: {
 backgroundColor: '#ff8080',
            },
 dates: new Date(),
 popover: {
 label: 'メッセージを表示できます',
            },
          }
        ],
    }
  },
 components: {
 AppBackgroundHolder,
  }
}
</script>
<style lang="scss" scoped>
body {
 background: #20262E;
 padding: 20px;
 font-family: Helvetica;
}

#app {
 background: #fff;
 border-radius: 4px;
 padding: 20px;
 transition: all 0.2s;
 text-align: center;
}
</style>

すると、下の画像のような見た目になりました。

先ほどよりはマシですがそれでも参考ページのものと全然違う…。

そもそもタイトル（2021年5月　など）が表示されていませんし、参考ページから見れるデモでは本日の日付にマウスオーバーでメッセージが表示されるはずなのですが、それもありません。

そこで、こちらの記事　に行きつきました。

ここをもとにv-calenderタグを書き足してみると以下の画像の見た目になりました。

一番最初に比べればかなりそれっぽくなりましたが、マウスオーバーの件はまだどうにもなっていませんし、やっぱり見た目が全然違います。

おそらくVue CLIのバージョンの違いによるものなのかなと思います。

（vue-cli4.5.13です）

以下はAccess.vueの現在の状態です。

<template>
 <section class="access">
 <AppBackgroundHolder :title="title"/>
 <v-app>
 <v-container>
 <div id='app'>
 <v-calendar 
 ref="calendar"
 v-model="focus"
 color="primary"
 type="month" 
 ></v-calendar> 
 </div> 
 </v-container>
 </v-app>
 </section>
</template>
<script>
import AppBackgroundHolder from './AppBackgroundHolder.vue'
 
export default {
 data () {
 return {
 title: 'Access',
 focus: '',
 el: '#app',
 attrs: [
          {
 key: 'today',
 highlight: {
 backgroundColor: '#ff8080',
            },
 dates: new Date(),
 popover: {
 label: 'メッセージを表示できます',
            },
          }
        ],
    }
  },
 components: {
 AppBackgroundHolder,
  }
}
</script>
<style lang="scss" scoped>
body {
 background: #20262E;
 padding: 20px;
 font-family: Helvetica;
}

#app {
 background: #fff;
 border-radius: 4px;
 padding: 20px;
 transition: all 0.2s;
 text-align: center;
}
</style>