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

//npmを使用の場合
npm install --save react-native-calendars

//yarnを使用の場合
yarn add react-native-calendars

npm install --save-dev @types/react-native-calendars --save-dev

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

export default function App() {
  return <Calendar />;
}

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';

<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);
  }}
  // 初めの曜日設定。例えば、月曜日なら１、日曜日なら７
  firstDay={2}
  // スワイプでの年月変更の可否。 デフォルト値 = false
  enableSwipeMonths={true}
/>

//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';