会社のイベントとして、2020年のアドベントカレンダーで記事を書いたのですが、個人のQiitaでも同じものを公開したいな〜と思ったので、ちょっとだけ変えて公開します！
去年の案件で急にReactでカレンダーを作ることになり、有識者もいない中、四苦八苦したのですが、ライブラリって便利だな〜と感じたので、Reactのreact-calendarを使ってカレンダーを作成したときのことを書きます。
※環境構築とかは端折ります。
##react-calendarとは
カレンダー実装だともっとメジャーなライブラリがあるかも知れないんのですが、今回、私はreact-calendarを使ってみたのですが、簡単にReactでカレンダーを実装できちゃいました。
条件を絞って、日付ごとに任意の内容を表示させたり、スタイルのカスタマイズなど 柔軟に対応できます。
##react-calendarで実装してみる
####react-calendarをインストール
yarnで「react-calendar」をインストールします。
yarn add react-calendar
####react-calendarをimportする
react-calendarをimportしてCalendarコンポーネントを呼び出します。
import Calendar from 'react-calendar'
export default class Calendar extends Component {
render() {
return(
<Calendar />
)
}
}
これだとまだ動きません！
####カレンダーに日付を表示する
カレンダーのタイルに日付（日本時間）を表示します。
import Calendar from 'react-calendar'
export default class Calendar extends Component {
render() {
return(
<div>
<Calendar
locale="ja-JP"
value={this.state.date}
/>
</div>
)
}
}
それぞれのPropsについては公式だと以下のように説明されています。（英語のドキュメントのみ、、、）
| Description | Description | Default value |Example values |
|:-----------:|:------------:|:------------:|:------------:|:------------:|:------------:|
|locale|Locale that should be used by the calendar. Can be any IETF language tag.| User's browser settings|"hu-HU"|
|value| Calendar value. Can be either one value or an array of two values. If you wish to use React-Calendar in an uncontrolled way, use defaultValue instead.|"n/a"| ・Date: new Date()
・An array of dates: [new Date(2017, 0, 1), new Date(2017, 7, 1)]|
これで、カレンダーの作成は完了です。とても簡単！！
####カレンダーに任意のアイテムを表示してみる
これだけだと寂しいので、日付タイルに任意のアイテムを表示させてみたいと思います。
import Calendar from 'react-calendar'
export default class Calendar extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
//テストデータ
month_item: {
2020-12-01: { text: 'work' },
2020-12-10: { text: 'hangout' },
2020-12-24: { text: 'Christmas Eve' },
2020-12-25: { text: 'Christmas' },
}
}
};
//日付の内容を出力
getTileContent({ date, view }) {
if (view === 'month') {
const targetDate = moment(date).format('YYYY-MM-DD')
return month_item[targetDate] && month_item[targetDate].text ?
<div>
<p>{month_item[targetDate].text}</p>
</div>
: null
}
}
render() {
return(
<div>
<Calendar
locale="ja-JP"
value={this.state.date}
tileContent={this.getTileContent.bind(this)} //ここを追加
/>
</div>
)
}
}
tileContentの詳細の説明は以下です。functionを呼び出して、returnされたものを渡せば任意の日付に内容を表示させることができます。
|Description|Description|Default value|Example values|
|:-----------:|:------------:|:------------:|:------------:|:------------:|:------------:|
|tileContent|Allows to render custom content within a given calendar item (day on month view, month on year view and so on).|n/a|・String: "Sample"
・React element:
・Function: ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? It's Sunday! : null|
##まとめ
Reactって便利〜！ 今回の記事では説明していませんが、Reduxと合わせてDBからデータを引っ張ってきてstateで制御すれば、スケジュールを登録したり、表示させたりすることも可能でした！
今回記載している以外にもたくさんPropsの種類もあるので、気になる方はぜひ公式URLから見てみてください！
###参考
・React-Calendar が便利 | バシャログ。
・Reactでカレンダー作成（React-Calendarライブラリ）