HOMEVuetify【Vuetify】【v-calendar】カレンダーを日本語で表示する【Vuetify】【v-calendar】カレンダーを日本語で表示する2021.10.28VuetifyBこんにちは、ryohei(@ityryohei)です!本記事では、Vuetifyのカレンダーを日本語で表示する方法をご紹介しています。Vuetifyのカレンダーを日本語で表示するには、どうすればいいんだろう?上記の疑問にお答えします。本記事では、下記バージョンのVue.jsとVuetifyを使用しています。動作しない場合はバージョンをご確認ください。Vue.js:v2.6.14Vuetify:v2.5.9では、解説していきます。Vuetifyでカレンダーを表示するVuetifyのCalendars(v-calendar)でカレンダーを表示してみます。確認のため、オプション等は指定せずにデフォルトのカレンダーを表示してみます。CodePen.実行結果を確認すると、月と曜日の表示が英語になっています。英語でも問題ないですが、日本のサイトでは日本語表記する方が自然ですよね。上記カレンダーを日本語表示に変更していきます。カレンダーを日本語表示に変更するv-calendarコンポーネントで表示されるカレンダーを日本語表示に変更します。v-calendarのにlocaleプロパティを追加することで、日本語表示に変更することができます。CodePen.実行結果を確認すると、英語表記になっていた月と曜日が日本語の表記に変更されているのが確認できますね。このままでも問題ないのですが、もう少し表示内容をカスタマイズしたいです。具体的には下記の部分です。「〇月〇日」ではなく「〇/〇」の形式で表示する各曜日を「〇曜日」の形式で表示する「〇日」ではなく日を削除して数字だけを表示する上記をカスタマイズしてみます。カレンダーの表示内容をカスタマイズする下記がカスタマイズ内容を追加したソースです。オプションの各フォーマットに関数を指定することで表示内容をカスタマイズすることができます。CodePen.以上でカレンダーの表示内容をカスタマイズすることができました。その他にも多くのプロパティが用意されていますので、カレンダーを使用される場合は下記ページを参考にしていただければと思います。参考:https://vuetifyjs.com/ja/api/v-calendar/最後にv-calendarを設置するだけで見た目が整ったカレンダーを簡単に表示することができます。普通に組もうとすると、HTMLでレイアウトを組んで、JSライブラリを読み込んで、CSSでデザインを調整して......中々手間も時間もかかってしまいます。いった部分でUIフレームワークの素晴らしさを実感できますね。Vue3に対応したVuetifyが公開されるという話ですし、ますます開発が加速しますね。一日も早く新しいVuetifyに触れたいものです。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。