React Native

react-native-calendarsの日本語化とカスタム方法

投稿日:2020年10月24日 更新日:

React Nativeでカレンダーを実装したい。
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を導入する手順をご覧ください。

(2021/01/19)後述:パッケージの更新があったので、内容をアップデートしました。
以下のバージョンを使用しています。
“@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-default

カレンダーの日本語化

デフォルトでは、年月や曜日の表記が英語表記になります。

これを以下のような日本語表記にする方法を紹介します。

react-native-calendars-japanese

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-weekend-color

<スポンサーリンク>

まとめ

以上がreact-native-calendarsの日本語化と基本的な使い方、そしてカスタム方法になります。

皆さんもぜひ、react-native-calendarsを用いて、独自のカスタムをしたカレンダーを作ってみてください。

広告

<スポンサーリンク>

広告

<スポンサーリンク>

-React Native
-

執筆者:

関連記事

【React Native】classとfunction、どちらを使うのか

classとfunctionの違いを知りたい。 どちらを使ったらいいのかわからない。 このような疑問に答えます。 React Nativeには、classとfunctionがあり、どちらを中心に使えば…

もっと見る

android-phone

アプリ開発でReact Nativeを使うメリットとデメリット

React Nativeって何? React Nativeを使うメリットが知りたい。 このような疑問に答えます。 アプリ開発を始めるときに、どのフレームワーク、どの言語を選べばいいか迷うと思います。 …

もっと見る

React NativeとTypeScriptの開発におすすめな本

React NativeとTypeScriptのおすすめな本を知りたい。 このような疑問に答えます。 React NativeとTypeScriptの日本語の情報はまだ少なく、中々見つかりません。 そ…

もっと見る

React Nativeでclassをfunctionに変換する10ステップ

React Native のclassをfunctionに変換したい。 このような疑問に答えます。 React Nativeでモバイルアプリ開発をするとき、functionで作りたくても、多くの資料は…

もっと見る

React Nativeのおすすめの勉強法と進め方【環境構築から学習まで】

React Nativeの学習方法が知りたい。 このような疑問に答えます。 私がReact Nativeを習得した経験を踏まえた上で、React Nativeのおすすめの学習方法をまとめました。 ※こ…

もっと見る


  1. Ryo より:

    はじめまして
    ソフトエアエンジニアの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

    解決方法をご存知でしたらご教授いただけますでしょうか
    もしくは どのような開発環境で実装されたかご回答いただけますでしょうか

    以上 よろしくお願いいたします

    • tegral より:

      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”

      記事を書いた以降にパッケージの更新があり、紹介している方法が使えなくなっているので近日中に新しいパッケージでも使用できる方法に記事を更新させていただきます。
      お手数をおかけしてすみません。

  2. yuu より:

    初めまして。
    react-native-calendarsにスタイリングについてお伺いしたいことがあります。
    週単位で下線を引きたい場合ってどのようにしたら実現できるか分かりますでしょうか?
    もしお分かりでしたらご教示いただけると幸いです。
    イメージとしては、iphoneの標準カレンダーをイメージしております。

    • tegral より:

      yuuさん、はじめまして。
      下線を引くのは実現できますよ。
      stylesのbuttonを以下のようにします。

      button: {
      height: 40,
      borderBottomWidth: 1,
      borderColor: ‘gray’,
      width: ‘100%’,
      justifyContent: ‘center’,
      },

      すると下線が生まれます。
      この方法ですと、数字が左にずれると思うので、TextタグをViewタグでくくり、styleにalignSelf:'center'を追加することで中寄できます。

      ぜひ参考にしてみてください。

  3. けいすけ より:

    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’ },
    }}
    勝手ながらの質問なので、もし可能であればエラー解消についてご教示頂けたら嬉しいです。

    • tegral より:

      けいすけさん、コメントありがとうございます。
      そのエラーは、Calendarの設定にmarkingType=”custom”が設定されているからだと思います。
      markingTypeを設定しない、もしくはsimple/period/multi-dotのいづれかにすれば解決すると思います。

      ぜひ参考にしてみてください。

  4. けいすけ より:

    初めまして。
    以前にもご質問させて頂いた者です。
    iOSの標準カレンダーのように曜日の下部に線を引きたい場合ってtextDayHeaderあたりをいじったら下線を引けるかなと思い、色々試してみたのですがうまく出来ずもし下線の引き方について知っていたらご教示頂けないでしょうか?
    合わせて、yuuさんの質問で週単位で下線を引く方法について回答をしていますが、最後の週のみ下線引かない方法を知っていたらご教示頂けると嬉しいです。

    • tegral より:

      けいすけさん、コメントありがとうございます。
      お返事遅くなってしまいすみません。
      以下の公式ドキュメントのadvanced-stylingで紹介されているように’stylesheet.calendar.header’のweekをオーバーライドすれば、上部の曜日の部分をいじれます。
      https://github.com/wix/react-native-calendars#advanced-styling

      また、最後の週のみ下線を引かない方法に関してですが、borderTopを使用したら、見た目上最後の週のみ下線がなく、また週の曜日に下線がつくようになるのではないかと思います。
      ぜひ参考にしてみてください。

comment

メールアドレスが公開されることはありません。

プロフィール

プロフィール

海外経験14年の帰国子女。
未経験からエンジニアに転職。
開発を中心にPLとして活動中。

詳しいプロフィールはこちらから。

広告

<スポンサーリンク>