タイトル通り、React Native でカレンダー機能を実装する際に利用したライブラリ「react-native-calendars」のご紹介です。
初めて使ったライブラリでしたが、実装がとても簡単で、かつ見た目もスタイリッシュなため、かなりおすすめです！
GitHub のページはこちらから。
GitHub – wix/react-native-calendars: React Native Calendar Components 🗓️📆
https://github.com/wix/react-native-calendars
事前準備として、まず下記のコマンドでライブラリをインストールします。
1 | npm install --save react-native-calendars |
あとは、使用したい箇所で下記をインポートすれば使用できます。
1 | import { Calendar } from 'react-native-calendars'; |
カレンダーの描画は下記のようにすれば表示されます。
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 }, }} /> |
3行目の onDayPress で、日付をタップした際に実行したい処理を指定できます。
また、私は使わなかったのですが、onDayLongPress という、日付を長押し視した時の処理を指定することもできます。
更に、予定がある事を表現する markedDates というパラメータもあります。
サンプルコードでは 5行目からがそうです。
上記では、markingType に period を指定し、○日から×日までの期間の選択を表現することができます。
他にも、単純に日付を円で囲ったり、日付下にドットを表示したりすることもできます。
詳しくは、GitHub のページをご参照ください。
以上、React Native の「react-native-calendars」ライブラリを使ってカレンダーを実装する方法でした。
ご参考になれば幸いです。
【2021年2月26日 追記】
本投稿でカレンダーは表示されますが、英語表記になっています。
カレンダーを日本語化する方法については下記の記事をご参照ください。
【javascript・react】stateの中身を形式別で調べる方法
