Reactでカレンダー作成（React-Calendarライブラリ）

Reactでカレンダーを作りたいと思いライブラリを探したところ、React-Calendarというものがあったのでご紹介します。

Ishiguro Suguru

Reactでカレンダーを作ったきっかけは、スマホアプリの”ポケ森”のイベント カレンダーがあったらいいなと思ったからです。 またReactは私自身触ったことがなかったので、勉強も兼ねて作ってみました。

React-Calendar とは

カレンダーを作成できるライブラリを探していたのですが、デザインが良さそうで機能も豊富なReact-Calendarというものを見つけました。 詳しくはGigHubに記載がありますが、実装の流れについて解説したいと思います。

作成したサンプルはここから確認できます。

実装手順

サンプルのカレンダーの日付の下にコメントがありますが、React-Calendarはデータを受け取りカレンダー内に表示ができます。 実際に使用する場合はReactプログラムに記述することはなくDBなどからデータを参照する形になると思います。 ただ、今回は簡単に実装したかったため、カレンダーに表示する情報をjsonファイル化してサーバー(S3)に配置しています。 以下、おおまかな実装手順になります。

  1. create-react-app で新規アプリ作成
  2. ライブラリ インストール(react-calendar, axios)
  3. jsonファイルの作成と配置
  4. コード作成
  5. ビルドしたファイルアップロード

1. create-react-app で新規アプリ作成

まずはベースのアプリを作ります。 create-react-appの使用は必須ではないですが、簡単に作成できるため以下のコマンドを実行してアプリを作成します。

create-react-app calendar

2. ライブラリ インストール(react-calendar, axios)

次にライブラリを追加します。 以下のコマンドではyarnを使用していますがnpmでも構いません。

# カレンダー ライブラリの追加。
yarn add react-calendar --save
# HTTP通信を扱うライブラリの追加。jsonファイル取得に利用。
yarn add axios --save

3. jsonファイルの作成と配置

create-react-appで作成したアプリの中身を見るとpublicというフォルダが作成されていると思います。 こちらにjsonファイルを配置します。 srcフォルダ直下にjsonファイルを配置すると、ビルド時にいっしょにコンパイルされてしまうためpublicに配置しておきましょう。 今回は/public/static/database.jsonというファイルを用意しました。 参考までに中身は以下の通りになります。

[
    {
        "startDate": "20200720",
        "content": "jsonデータA"
    },
    {
        "startDate": "20200710",
        "content": "jsonデータB"
    }
]

4. コード作成

create-react-app実行時に自動的に作成される、index.js, App.jsを編集していきます。 今回はApp.js側に必要な処理を記述し、index.js側ではもともと記述してあった不要なコードを削除しています。

App.jsにコメントを記述していますが、tileContentプロパティに値を渡すことでタイルに任意のコンテンツを表示することができます。 先程のjsonファイルに日付のデータがありましたが、表示するカレンダーの日付と一致する場合にコンテンツを表示するように処理しています。 もっと複雑な処理もできますので、是非参考に色々試してみてください。

  • index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
  • App.js
import React from 'react';
import './App.css';

// React Calendar, axios のimport文追加
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import axios from 'axios';

// axios で取得するjsonファイルのパスを宣言
const URL = "/static/database.json";

// App クラス コンポーネント
class App extends React.Component {

  constructor() {
    super();
    this.state = {
      database: [],
      loading: true
    };
  }

  // Component が Mount された後に実行されるメソッド
  // Ajax を使ったデータ フェッチなどの処理を記述
  componentDidMount() {
    this.getJson();
  }

  // jsonファイルを取得する関数定義
  // response データと取得結果の状態をstateに設定
  getJson = () => {
    axios.get(URL).then(res => {
      this.setState({
        database: res.data,
        loading: false
      });
    });
  };

  // カレンダーのタイルに表示する内容を取得する関数定義
  getTileContent = (calendar) => {
    // 日付フォーマット処理(YYYYMMDD)
    let year = calendar.date.getFullYear();
    let month = calendar.date.getMonth() + 1;
    let day = calendar.date.getDate();
    month = ('0' + month).slice(-2);
    day = ('0' + day).slice(-2);
    let formatDate = year + month + day;
    // タイルに表示する内容の初期化
    let message = "";

    // 取得したjsonデータを読み込みカレンダーの日付と一致する場合にタイル内容設定
    this.state.database.forEach(element => {
      if(formatDate === element.startDate) {
        message = element.content;
      }
    });// end forEach

    // タイルに表示する内容を返却
    return (
      <p>{message}　</p>
    );
  }

  render() {

    // jsonファイルの読み込み中は以下を表示
    if (this.state.loading) {
      return (<div>Now loading</div>)
    }

    // jsonファイルの読み込み完了後にカレンダー表示
    return (
      <div>
        <Calendar
          value={new Date(2020, 6, 1)} // デモ用に固定値を指定
          tileContent={this.getTileContent}
        />
      </div>
    );
  }

}

export default App;

5. ビルドしたファイルアップロード

最後にyarn buildを実行して出来上がったファイルをサーバーにアップロードすれば完了です。（本サイトではS3を利用） ビルドしたファイルはbuildフォルダに配置されますが、手順3でpublicに配置したjsonファイルもこの中に含まれているはずです。

最後に

以上でReactのカレンダーを作成することができると思いますので皆さん是非試してみてください。 ちなみにその後いろいろカレンダー探していたらGoogleカレンダーをサイトに埋め込む事もできるみたいです… こちらのほうが見た目や利便性が良さそうで、かつ簡単にできるみたいなので導入したらご紹介したいと思います。

comments powered by Disqus