【Vuetify】【v-calendar】カレンダーにイベントを表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyのカレンダーにイベントを表示する方法をご紹介しています。

Vuetifyでカレンダーにイベントを表示したいんだけど、どうすればいいんだろう？

上記の疑問にお答えします。

本記事では、下記バージョンのVue.jsとVuetifyを使用しています。動作しない場合はバージョンをご確認ください。

Vue.js：v2.6.14
Vuetify：v2.5.9

では、解説していきます。

カレンダーにイベントを簡単に表示する

Vuetifyのカレンダーにイベントを表示するには、配列にイベントの情報を指定して出力します。動作確認も兼ねて、最低限必要な情報を配列に指定し、カレンダーにイベントを表示してみます。

最低限指定するキーと値は下記の通りです。

キー	値
name	イベント名を指定します。
start	イベント開始日時を指定します。
end	イベント終了日時を指定します。

上記の内容で作成した配列をHTML側の:evetnsに渡すと、カレンダー上にイベントが表示されます。日付だけのパターン、日付＋時間のパターンでカレンダーにイベントを表示してみます。

HTML

<div id="app">
    <v-app>
        <v-calendar
            locale="ja-jp"
            :events="events"
        ></v-calendar>
     </v-app>
</div>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data(){
        return {
            events: [
                {
                    name: '月次報告',
                    start: '2021-10-01 09:00',
                    end: '2021-10-01 17:00',
                },
                {
                    name: '出張',
                    start: '2021-10-11',
                    end: '2021-10-15',
                }
            ],
        }
    },
})

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

実行結果を確認すると、eventsの配列に指定した内容がカレンダーに表示されていますね。nameやendは省略することも可能です。省略した場合の表示につきましては、上記デモ右上の「EDIT ON CodePen」からご確認いただければと思います。

イベントの色を変更する

Vuetifyのv-calendarのイベント表示は細かいカスタマイズが可能です。その中でもよく使用する色の変更方法についてご紹介します。他のプロパティも同様の方法で設定できますので、参考にしていただければ思います。

全イベントに同色を指定する

カレンダー内のすべてのイベントに同じ色を適用します。下記を指定すると、全イベントの背景色が黄色になって表示されます。

HTML

<div id="app">
    <v-app>
        <v-calendar
            locale="ja-jp"
            :events="events"
            event-color="yellow"
        ></v-calendar>
    </v-app>
</div>

メソッドでイベントの色を指定する

メソッドでイベントの色を指定します。下記例ではcolorの値がイベントの背景となります。

HTML

<div id="app">
    <v-app>
        <v-calendar
            locale="ja-jp"
            :events="events"
            :event-color="getEventColor"
        ></v-calendar>
    </v-app>
</div>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data(){
        return {
            color: 'yellow',
            events: [
                {
                    name: '月次報告',
                    start: '2021-10-01 09:00',
                    end: '2021-10-01 17:00',
                },
                {
                    name: '出張',
                    start: '2021-10-11',
                    end: '2021-10-15',
                }
            ],
        }
    },
    methods: {
        getEventColor(){
            return this.color
        },
    }
})

配列でイベントの色を指定する

配列に追加する形で、イベントの色を指定します。各配列にcolorと色を指定することで、カレンダーに反映されます。

HTML

<div id="app">
    <v-app>
        <v-calendar
            locale="ja-jp"
            :events="events"
        ></v-calendar>
    </v-app>
</div>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data(){
        return {
            color: 'yellow',
            events: [
                {
                    name: '月次報告',
                    start: '2021-10-01 09:00',
                    end: '2021-10-01 17:00',
                    color: 'purple'
                },
                {
                    name: '出張',
                    start: '2021-10-11',
                    end: '2021-10-15',
                    color: 'yellow'
                }
            ],
        }
    },
})

下記は配列で色を指定した場合の実行結果です。各イベントに設定した色が反映されています。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

他にもたくさんのプロパティがありますので、下記を参考に色々設定してみてくださいね。

参考：https://vuetifyjs.com/ja/api/v-calendar/