【React Native】「react-native-calendars」ライブラリを使ってカレンダーを実装する

タイトル通り、React Native でカレンダー機能を実装する際に利用したライブラリ「react-native-calendars」のご紹介です。
初めて使ったライブラリでしたが、実装がとても簡単で、かつ見た目もスタイリッシュなため、かなりおすすめです！

GitHub のページはこちらから。

GitHub – wix/react-native-calendars: React Native Calendar Components 🗓️📆
https://github.com/wix/react-native-calendars

事前準備として、まず下記のコマンドでライブラリをインストールします。

npm install --save react-native-calendars

あとは、使用したい箇所で下記をインポートすれば使用できます。

import { Calendar } from 'react-native-calendars';

カレンダーの描画は下記のようにすれば表示されます。

<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 },
  }} />

3行目の onDayPress で、日付をタップした際に実行したい処理を指定できます。
また、私は使わなかったのですが、onDayLongPress という、日付を長押し視した時の処理を指定することもできます。

更に、予定がある事を表現する markedDates というパラメータもあります。
サンプルコードでは 5行目からがそうです。
上記では、markingType に period を指定し、○日から×日までの期間の選択を表現することができます。
他にも、単純に日付を円で囲ったり、日付下にドットを表示したりすることもできます。
詳しくは、GitHub のページをご参照ください。

以上、React Native の「react-native-calendars」ライブラリを使ってカレンダーを実装する方法でした。
ご参考になれば幸いです。

【2021年2月26日 追記】
本投稿でカレンダーは表示されますが、英語表記になっています。
カレンダーを日本語化する方法については下記の記事をご参照ください。
【javascript・react】stateの中身を形式別で調べる方法