react-native-calendarsの使い方やカスタム方法が知りたい。
このような疑問に答えます。
〇この記事の内容
React Nativeでカレンダーを実装したい場合は、react-native-calendarsというライブラリを使用するのが便利です。
この記事では、react-native-calendarsの導入方法と日本語化の手順や土日の色の変更などの簡単なカスタム方法を紹介します。
公式のドキュメントはreact-native-calendars(GitHub)になるので、こちらもぜひ参考にしてみてください。
~~前提条件~~
この記事では、React NativeにTypeScriptを使用して開発しています。
JavaScriptを使用されてる方は型定義の部分を省けば使用できます。
React Nativeの環境構築がまだな方はReact Nativeの環境構築の手順【Windows版】をご覧ください。
React NativeにTypeScriptを導入されたい方はReact NativeプロジェクトにTypeScriptを導入する手順をご覧ください。
以下のバージョンを使用しています。
“@types/react-native-calendars”: “^1.505.0”,
“react”: “16.13.1”,
“react-native”: “0.63.4”,
“react-native-calendars”: “^1.1129.0”
環境が違いますと、パッケージの更新などで動作しない場合があります。
ご了承ください。
<スポンサーリンク>
react-native-calendarsの導入
react-native-calendarsのインストール
まず、react-native-calendarsをインストールします。
追加したいプロジェクト直下で次のいずれかのコマンドを実行してください。
//npmを使用の場合
npm install --save react-native-calendars
//yarnを使用の場合
yarn add react-native-calendars
TypeScriptを使っている場合は追加で次のコマンドを実行してください。
npm install --save-dev @types/react-native-calendars --save-dev
react-native-calendarsの確認
react-native-calendarsに実装されているカレンダーを呼び出して、無事カレンダーが表示されることを確認しましょう。
import React from 'react';
import { Calendar } from 'react-native-calendars';
export default function App() {
return <Calendar />;
}
上記のコードのようにreact-native-calendarsからCalendarを呼び出し、以下のようなカレンダーが表示されれば成功です。
カレンダーの日本語化
デフォルトでは、年月や曜日の表記が英語表記になります。
これを以下のような日本語表記にする方法を紹介します。
react-native-calendarsの言語設定を変える場合は、LocaleConfig
を変更します。
また、年月の表記を変更するためにmonthFormat
を追加します。
コードは以下のようになります。
import React from 'react';
import { Calendar, LocaleConfig } from 'react-native-calendars';
export default function App() {
return <Calendar monthFormat={'yyyy年 MM月'} />;
}
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';
これで、日本語化は完成です。
画面が変わっていない場合はリロードしてみてください。
react-native-calendarsの基本的な使い方
react-native-calendarsの基本的なパラメーターの使用方法を紹介します。
詳しくはreact-native-calendarsのドキュメントのbasic parametersをご覧ください。
<Calendar
// 最初に表示される月。 デフォルト値 = Date()
current={'2020-10-18'}
// カレンダーで選択できる範囲の最初の日。この日以前の日付はグレーアウトします。 デフォルト値 = undefined
minDate={'2020-01-01'}
// カレンダーで選択できる範囲の最後の日。この日以前の日付はグレーアウトします。 デフォルト値 = undefined
maxDate={'2020-12-31'}
// 日付を選択したときの挙動。
onDayPress={day => {
console.log('selected day', day);
}}
// 年月の表示フォーマット。
monthFormat={'yyyy年 MM月'}
// 年月を変更したときの挙動。
onMonthChange={month => {
console.log('month changed', month);
}}
// 初めの曜日設定。例えば、月曜日なら1、日曜日なら7
firstDay={2}
// スワイプでの年月変更の可否。 デフォルト値 = false
enableSwipeMonths={true}
/>
このように、様々なパラメターを渡すことで、カレンダーの設定を変えることができます。
他にも様々なパラメーターを渡すことができるので、詳しくはreact-native-calendarsのドキュメントのbasic parametersをご覧ください。
カスタム例:土日の色の変更
それでは、カスタムの例として、土日の日付の色の変更の仕方を紹介します。
momentパッケージを利用しているので、使用される方はmomentを次のコマンドでインストールしてください。
//npmを使用の場合
npm install moment --save
//yarnを使用の場合
yarn add moment
では、土日の日付の色を変更するコードはつぎのようになります。
import moment from 'moment';
import React, {useState} from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import {Calendar, DateObject, LocaleConfig} from 'react-native-calendars';
export default function App() {
const [currentDate, setCurrentDate] = useState(moment());
return (
<Calendar
current={currentDate.format('YYYY-MM-DD')}
onPressArrowLeft={(subtractMonth) => {
subtractMonth();
setCurrentDate(currentDate.add(-1, 'month'));
}}
onPressArrowRight={(addMonth) => {
addMonth();
setCurrentDate(currentDate.add(1, 'month'));
}}
dayComponent={({ date }) => {
return (
<TouchableOpacity onPress={() => {}} style={styles.button}>
<Text style={dayTextStyle(date, currentDate).dayText}> {date.day}</Text>
</TouchableOpacity>
);
}}
/>
);
}
const dayTextStyle = (date: DateObject, currentDate: moment.Moment) =>
StyleSheet.create({
dayText: {
fontSize: 16,
backgroundColor: date.dateString === moment().format('YYYY-MM-DD') ? '#CCCCCC' : 'transparent',
color: date.month !== currentDate.month() + 1 ? 'gray' : moment(date.dateString).days() === 0 ? 'red' : moment(date.dateString).days() === 6 ? 'blue' : 'black',
},
});
const styles = StyleSheet.create({
button: {
height: 40,
},
});
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';
ポイントはdayComponentパラメーターでカスタマイズされた日付表示をしているところです。
getWeekEnd関数で、土日にあたる日付をマークし、それをカレンダー内に反映させています。
このコードの実行結果は次のようになります。
<スポンサーリンク>
まとめ
以上がreact-native-calendarsの日本語化と基本的な使い方、そしてカスタム方法になります。
皆さんもぜひ、react-native-calendarsを用いて、独自のカスタムをしたカレンダーを作ってみてください。
はじめまして
ソフトエアエンジニアのRyoです
React Nativeで カレンダーを実装しようと情報を調査しましたところ 本記事を拝見しました
本記事「react-native-calendarsの日本語化とカスタム方法」の「土日の日付の色を変更するコード」を
私のReact Native環境で実装しましたが
38行目の `dayComponent={({ date, state, marking }) => {` で state と marking の値が undefined となり
54行目の state marking.sunday marking.saturday が解決されずエラー終了してしまいます
——–実行環境の依存関係——–
“dependencies”: {
“@types/react-native-calendars”: “^1.17.0”,
“moment”: “^2.29.1”,
“react”: “16.13.1”,
“react-native”: “0.63.4”,
“react-native-calendars”: “^1.17.0”
—————————————–
—————-検証方法————–
TypeError: Cannot read property ‘sunday’ of undefined This error is located at:
in dayComponent (at day/index.js:88)
in IGNORE (at calendar/index.js:225)
in RCTView (at View.js:34)
in View (at calendar/index.js:224)
in RCTView (at View.js:34)
in View (at calendar/index.js:249)
in RCTView (at View.js:34)
in View (at calendar/index.js:266)
in RCTView (at View.js:34)
in View (at calendar/index.js:306)
in RCTView (at View.js:34)
in View (at calendar/index.js:305)
in Calendar (at CalendarPage.tsx:42)
in CalendarPage (at App.tsx:6)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
—————————————–
自身で調査しましたが解決に至りませんでした
また同様の件で github にissue を上げている方もいらっしゃいました
https://github.com/wix/react-native-calendars/issues/1178
解決方法をご存知でしたらご教授いただけますでしょうか
もしくは どのような開発環境で実装されたかご回答いただけますでしょうか
以上 よろしくお願いいたします
Ryoさん、はじめまして。
コメントありがとうございます。
わたしが使っていた環境は以下になります。
“@types/react-native-calendars”: “^1.20.10”,
“moment”: “^2.29.1”,
“react”: “16.13.1”,
“react-native”: “0.63.2”,
“react-native-calendars”: “^1.403.0”
記事を書いた以降にパッケージの更新があり、紹介している方法が使えなくなっているので近日中に新しいパッケージでも使用できる方法に記事を更新させていただきます。
お手数をおかけしてすみません。
初めまして。
react-native-calendarsにスタイリングについてお伺いしたいことがあります。
週単位で下線を引きたい場合ってどのようにしたら実現できるか分かりますでしょうか?
もしお分かりでしたらご教示いただけると幸いです。
イメージとしては、iphoneの標準カレンダーをイメージしております。
yuuさん、はじめまして。
下線を引くのは実現できますよ。
stylesのbuttonを以下のようにします。
height: 40,
borderBottomWidth: 1,
borderColor: ‘gray’,
width: ‘100%’,
justifyContent: ‘center’,
},
すると下線が生まれます。
この方法ですと、数字が左にずれると思うので、TextタグをViewタグでくくり、styleに
alignSelf:'center'
を追加することで中寄できます。ぜひ参考にしてみてください。
[…] react-native-calendarsの日本語化とカスタム方法 | てぐらる’s ブログ https://tegralsblog.com/react-native-calendars-custom-japanese/ […]
react nativeを勉強し始めたばかりの初心者です。
本記事を拝見し、カレンダー機能を実装させていただいています。
一点質問があり、ご教示いただけると幸いです。
typescriptで現在、開発しており、公式ドキュメントを参考に「markedDates」を以下のように書いてみたのですが、「2 中 2 のオーバーロード, ‘(props: CalendarProps, context: any): Calendar’ により、次のエラーが発生しました。
型 ‘{ marked: true; dotColor: string; }’ を型 ‘CustomMarking’ に割り当てることはできません。
オブジェクト リテラルは既知のプロパティのみ指定できます。’marked’ は型 ‘CustomMarking’ に存在しません。」のようなエラーが発生しておりどうしたらいいか分からないです。
markedDates={{
’2021-03-1′: { marked: true, dotColor: ‘#1d3994′ },
’2021-01-3’: { marked: true, dotColor: ‘#1d3994′ },
’2021-01-5’: { marked: true, dotColor: ‘#1d3994′ },
’2021-01-7’: { marked: true, dotColor: ‘#1d3994’ },
}}
勝手ながらの質問なので、もし可能であればエラー解消についてご教示頂けたら嬉しいです。
けいすけさん、コメントありがとうございます。
そのエラーは、Calendarの設定にmarkingType=”custom”が設定されているからだと思います。
markingTypeを設定しない、もしくはsimple/period/multi-dotのいづれかにすれば解決すると思います。
ぜひ参考にしてみてください。
初めまして。
以前にもご質問させて頂いた者です。
iOSの標準カレンダーのように曜日の下部に線を引きたい場合ってtextDayHeaderあたりをいじったら下線を引けるかなと思い、色々試してみたのですがうまく出来ずもし下線の引き方について知っていたらご教示頂けないでしょうか?
合わせて、yuuさんの質問で週単位で下線を引く方法について回答をしていますが、最後の週のみ下線引かない方法を知っていたらご教示頂けると嬉しいです。
けいすけさん、コメントありがとうございます。
お返事遅くなってしまいすみません。
以下の公式ドキュメントのadvanced-stylingで紹介されているように’stylesheet.calendar.header’のweekをオーバーライドすれば、上部の曜日の部分をいじれます。
https://github.com/wix/react-native-calendars#advanced-styling
また、最後の週のみ下線を引かない方法に関してですが、borderTopを使用したら、見た目上最後の週のみ下線がなく、また週の曜日に下線がつくようになるのではないかと思います。
ぜひ参考にしてみてください。