【React】カレンダーを簡単に実装できるライブラリ「react-calendar」

本当に簡単にカレンダーを実装できたのでかなりおすすめ！
React でカレンダーを実装できるライブラリ「react-calendar」のご紹介です。

GitHub のページはこちらから。

GitHub – wojtekmaj/react-calendar: Ultimate calendar for your React app.
https://github.com/wojtekmaj/react-calendar

実装の際に参考にした記事はこちらです。

React-Calendar が便利 | バシャログ。
http://bashalog.c-brains.jp/19/05/17-174358.php

実装方法ですが、まず npm でライブラリをインストールします。

npm install react-calendar --save

インストールが完了したら、import Calendar from 'react-calendar'; でライブラリをインポートします。
サンプルコードは下記のとおりです。

import React, { Component } from 'react';
import Calendar from 'react-calendar';

class CalendarPage extends Component {
  render() {
    return (
      <Calendar locale="ja-JP" calendarType="US" value={new Date()} />
    );
  }
}

export default withRouter(CalendarPage);

必要最低限の機能だけを実装するなら上記のコードのみで問題ないと思います。
ですが、カレンダーの日付に予定を表示させたり、日付タップで任意の処理を実行するなどをしたい時には、Props で追加していく必要があります。
これらの機能の実装については、上で紹介した参考サイトにサンプルコードが掲載されていて、とても参考になりました。
また、見た目に関しては、Props の className や tileClassName などでクラス名の指定ができるので、こちらを使って CSS で変更することも簡単にできました。

GitHub のライブラリ紹介メッセージで「Reactアプリの究極のカレンダー」とありましたが、確かに使いやすかったです！
カレンダーを実装する必要があるときには、是非ご検討ください。

以上、React でカレンダーを実装するためのライブラリ「react-calender」のご紹介でした。
ご参考になれば幸いです。