【Vuetify】【v-calendar】カレンダーを日本語で表示する

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

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

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

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

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

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

Vuetifyでカレンダーを表示する

VuetifyのCalendars（v-calendar）でカレンダーを表示してみます。確認のため、オプション等は指定せずにデフォルトのカレンダーを表示してみます。

HTML

<div id="app">
    <v-app>
        <v-calendar></v-calendar>
     </v-app>
</div>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify()
})

実行結果

See the Pen 7279-1 by ryohei (@intotheprogram) on CodePen.

実行結果を確認すると、月と曜日の表示が英語になっています。英語でも問題ないですが、日本のサイトでは日本語表記する方が自然ですよね。なので上記カレンダーを日本語表示に変更していきます。

カレンダーを日本語表示に変更する

v-calendarコンポーネントで表示されるカレンダーを日本語表示に変更します。v-calendarのにlocaleプロパティを追加することで、日本語表示に変更することができます。

HTML

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

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
})

実行結果

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

実行結果を確認すると、英語表記になっていた月と曜日が日本語の表記に変更されているのが確認できますね。このままでも問題ないのですが、もう少し表示内容をカスタマイズしたいです。

具体的には下記の部分です。

• 「〇月〇日」ではなく「〇/〇」の形式で表示する
• 各曜日を「〇曜日」の形式で表示する
• 「〇日」ではなく日を削除して数字だけを表示する

上記をカスタマイズしてみます。

カレンダーの表示内容をカスタマイズする

下記がカスタマイズ内容を追加したソースです。オプションの各フォーマットに関数を指定することで表示内容をカスタマイズすることができます。

HTML

<div id="app">
    <v-app>
        <v-calendar
          ref="calendar"
          locale="ja-jp"
          :day-format="dayFormat"
          :weekday-format="weekdayFormat"
          :month-format="monthFormat"
        ></v-calendar>
     </v-app>
</div>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data(){
        return {
            dayOfWeek: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日']
        }
    },
    methods: {
        dayFormat: function(date){
            return new Date(date.date).getDate()
        },
        weekdayFormat: function(date){
            return this.dayOfWeek[date.weekday]
        },
        monthFormat: function(date){
            return new Date(date.date).getMonth()+1+' /'
        }
    }
})

実行結果

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

以上でカレンダーの表示内容をカスタマイズすることができました。その他にも多くのプロパティが用意されていますので、カレンダーを使用される場合は下記ページを参考にしていただければと思います。

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

最後に

v-calendarを設置するだけで見た目が整ったカレンダーを簡単に表示することができます。普通に組もうとすると、HTMLでレイアウトを組んで、JSライブラリを読み込んで、CSSでデザインを調整して……中々手間も時間もかかってしまいます。こういった部分でUIフレームワークの素晴らしさを実感できますね。

もうすぐVue3に対応したVuetifyが公開されるという話ですし、ますます開発が加速しますね。一日も早く新しいVuetifyに触れたいものです。

以上、Vuetifyでカレンダーを日本語で表示する方法のご紹介でした！