先日紹介した、時間単位でカレンダーを表示できるライブラリ「react-big-calendar」について、こちらで表示できるカレンダーの曜日などを日本語で表示出来るように修正したのでその手順をまとめます。
なお、以前の記事で、導入方法から実装までのサンプルコードを掲載しておりますので、そちらもご参考にしていただければと思います。
さて、日本語化の手順ですが、それには Moment.js を使用します。
公式サイトはこちら。
react-big-calendar の localizer でも使用するので、私は一緒にインストールしました。
で、こちらをインストールしている場合は、下記の1行を追加すればOKです。
import 'moment/locale/ja';
import moment from 'moment'; のすぐ下に追加してください。
こちらを追加することで、日本語語化に対応できます。
ちなみに、こちらの記述は Moment.js のドキュメントに記載されていました。
なお、もしライブラリをインストールしていない場合は、npm install moment --save を実行してください。
あとは、プロジェクトをビルドして実行すれば、日本語化できているはずです。
ただ、日本語になるのはカレンダーのみで、先月や来月に移動するためのボタンの文言は英語のままです…。
こちらはまだ対応できていません…。
ただし、ただ単純に日本語化しただけだと、ヘッダー部分の「2020 March」や、カレンダーの日付ががそのまま日本語になってしまい、ちょっと違和感がある場合があります。
なので、こちらについては formats を定義して表記を修正しました。
サンプルはこちら。
const formats = {
dateFormat: 'D',
dayFormat: 'D(ddd)',
monthHeaderFormat: 'YYYY年M月',
dayHeaderFormat: 'M月D日(ddd)',
dayRangeHeaderFormat: 'YYYY年M月',
}
こちらを、カレンダーコンポーネントの formats に指定します。
たとえば、2行目の dateFormat は月間カレンダーをのの日付の表示方法を指定できます。
デフォルトだと 01、02、となっていましたが、個人的に 1桁の数字の前に 0 がつくのが嫌いだったので、'D' とし、1桁の数字の前に 0 がつかないようにしました。
それ以外のフォーマットについては、公式サイトの formats の項目を参考にしてください。
なお、表記を定義するときに使う、YYYY や ddd などついては、Moment.js に一覧がありますので、こちらをご確認ください。
各リンクはこちらです。
http://jquense.github.io/react-big-calendar/examples/index.html#prop-formats
で、サンプルコードの全体がこちら。
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import '../App.css';
import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
import 'react-big-calendar/lib/css/react-big-calendar.css';
import moment from 'moment';
import 'moment/locale/ja';
const localizer = momentLocalizer(moment);
const eventList = [
{
id: 0,
title: 'All Day Event very long title',
allDay: false,
start: new Date('2020-03-01 9:00'),
end: new Date('2020-03-01 13:00'),
},
{
id: 1,
title: 'Long Event',
allDay: false,
start: new Date('2020-03-07 15:00'),
end: new Date('2020-03-07 17:00'),
}
];
const formats = {
dateFormat: 'D',
dayFormat: 'D(ddd)',
monthHeaderFormat: 'YYYY年M月',
dayHeaderFormat: 'M月D日(ddd)',
dayRangeHeaderFormat: 'YYYY年M月',
}
class CalendarPage extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div>
<Calendar
localizer={localizer}
events={eventList}
timeslots={2}
defaultView={Views.WEEK}
onSelectEvent={event => alert(event.title)}
views={['month', 'week', 'day']}
formats={formats}
style={{ height: 500 }}
/>
</div>
);
}
}
export default withRouter(CalendarPage);
週カレンダーの日付部分を「5日(木)」のようにしたり、月カレンダーのヘッダーを「2020年3月」にしたりしています。
こちらは適宜お好みで変更してください。
以上、「react-big-calendar」ライブラリで表示できるカレンダーを日本語化する方法でした。
ご参考になれば幸いです。
