ホーム > Vue > Vuetifyのv-calendarでAPIから取得したデータを表示する方法
Vue

Vuetifyのv-calendarでAPIから取得したデータを表示する方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 結論
  2. 解説
  3. まとめ
PR

⇨ Vue 記事の目次はこちら

Vuetify の v-calendar で API から取得したデータを表示する方法について書きました。

Vuetify の公式では具体的に API からデータを取得した時のケースが書かれていないのと、なんか小難しかったので、実際にありそうな形にしています。

環境
Vuetify:"^2.6.2"

結論

events の中に、start、end（今回は end はつけていません）のプロパティを付けて配列に追加すると、

その日付けのところに表示されます。

ややこしいかもしれませんが、関数のところに注目してもらえればと思います。

<template>
  <v-calendar
    ref="calendar"
    v-model="value"
    :weekdays="weekday"
    :type="type"
    :events="events"
    :event-overlap-mode="mode"
    :event-overlap-threshold="30"
    @change="getEvents"
  >
    <template v-slot:event="{ event }">
      <div>ここにカレンダーに表示したいやつを自由にかける</div>
    </template>
  </v-calendar>
</template>

<script>
  export default {
    data() {
      return {
        value: "",
        type: "month",
        mode: "stack",
        weekday: [0, 1, 2, 3, 4, 5, 6],
        events: [],
        users: [],
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        axios.get("api/users").then(({ data }) => {
          this.users = data.users
          this.getEvents()
        })
      },
      getEvents() {
        const events = []
        for (var i = 0; i < this.users.length; i++) {
          const first = new Date(this.users[i].created_at)
          events.push({
            name: this.users[i].name,
            image_url: this.users[i].image_url,
            start: first,
          })
        }
        this.events = events
      },
    },
  }
</script>

解説

カレンダーに表示するデータを作成する方法

ユーザーの数だけ for 文を回して、events にデータを入れていきます。

      getEvents() {
        const events = [];
        for (var i = 0; i < this.users.length; i++) {
          const first = new Date(this.users[i].created_at);
          events.push({
            name: this.users[i].name,
            image_url: this.users[i].image_url,
            start: first,
          });
        }
        this.events = events;
      },
const first = new Date(this.users[i].created_at)

この時間形式でカレンダーを表示する開始と終了を指定できます。

カレンダーに表示する

カレンダーに表示するデータは、「name」というプロパティに持たせた状態が表示され、他にどういう情報を載せるかは、props で指定します。

props で何が表示できるかは公式ドキュメントでご確認ください。

name プロパティを表示するだけなら、

<v-calendar
  ref="calendar"
  v-model="value"
  :weekdays="weekday"
  :type="type"
  :events="events"
  :event-overlap-mode="mode"
  :event-overlap-threshold="30"
  @change="getEvents"
>
</v-calendar>

で OK です。

もし、自由にカレンダーの中に書きたい場合、

<v-calendar
  ref="calendar"
  v-model="value"
  :weekdays="weekday"
  :type="type"
  :events="events"
  :event-overlap-mode="mode"
  :event-overlap-threshold="30"
  @change="getEvents"
>
  <template v-slot:event="{ event }">
    <div>{{event.name}}</div>
    <img :src="event.image_url" />
  </template>
</v-calendar>

このように v-slot してあげれば OK です。

参考

Vuetify-V-calendar

まとめ

以上、Vuetify の v-calendar に関する記事でした。

誰かの参考になれば幸いです。

質問、誤植などあれば TwitterDM からご連絡ください。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。