【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の配列に指定した内容がカレンダーに表示されていますね。nameendは省略することも可能です。省略した場合の表示につきましては、上記デモ右上の「EDIT ON CodePen」からご確認いただければと思います。

イベントの色を変更する

Vuetifyv-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/

最後に

前回のカレンダーを日本語で表示する方法に続いて、イベントの表示方法についてのご紹介となりました。カレンダーの表示についてはもっとカスタマイズができそうなので、検証しつつ投稿にまとめて共有していきたいと思います。

以上、Vuetifyでカレンダーにイベントを表示する方法のご紹介でした!

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍