以前、「【React Native】「react-native-calendars」ライブラリを使ってカレンダーを実装する」の記事で、アプリにカレンダーを実装する方法について紹介しましたが、今回はそのカレンダーを日本語化する方法についてです。
参考にさせていただいた駄記事はこちらから。
react-native-calendarsの日本語化とカスタム方法 | てぐらる’s ブログ
https://tegralsblog.com/react-native-calendars-custom-japanese/
ライブラリのインストール手順については割愛します！
日本語化の方法ですが、ライブラリをインポートする際に、併せて LocaleConfig も読み込みます。
そして、日本語での月、曜日の名前を設定します。
サンプルコードは下記の通りです。
1 2 3 4 5 6 7 8 9 | import { Calendar, LocaleConfig } from 'react-native-calendars';LocaleConfig.locales.jp = { monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'], dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],};LocaleConfig.defaultLocale = 'jp'; |
カレンダーを表示する記述については、前回の記事のコードと全く同じです。
下記のコード を render() の return 内に記述してください。
1 2 3 4 5 6 7 8 9 10 11 | <Calendar monthFormat={'yyyy年 M月'} onDayPress={this.onDayPress} markingType={'period'} markedDates={{ '2021-02-21': { startingDay: true, color: '#50cebb', selected: true }, '2021-02-22': { color: '#70d7c7', selected: true }, '2021-02-23': { color: '#70d7c7', selected: true }, '2021-02-24': { color: '#70d7c7', selected: true }, '2021-02-25': { endingDay: true, color: '#50cebb', selected: true }, }} /> |
なお私は最初、LocaleConfig の設定を componentDidMount() に記述してしまい、エラーが発生していました…。
日本語かの設定は、ライブラリインポート直後に実行するようご注意ください。
以上、React Native の「react-native-calendars」ライブラリで表示するカレンダーを日本語化する方法についてでした。
ご参考になれば幸いです。
