React-Calendar が便利

JavaScript

fujihara

2019.05.17

どうもfujiharaです。先日人生2回目となる鳥の糞被弾を味わいました。ドラゴンボールスクラッチでもやってみようかな。
本日はReactでカレンダーを実装する時に便利だと思ったReact-Calendarをご紹介します。

React Calendar

React でカレンダーないかなぁって探していたら見つけました。以下が売りらしいです。
React Calendar

様々な表示形式（月、年、10年)
レンジセレクトができる
マルチ言語対応
moment.jsを使用していない

実装

react-calendar を npm でインストールしたら、以下のようにして使えます。


import React from 'react';
import Calendar from 'react-calendar';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(2019, 4, 17),
      //月のデータ
      month_days: {
        20190501: { is_holiday: true },
        20190502: { is_holiday: true },
        20190503: { is_holiday: true },
        20190506: { is_holiday: true },
        20190514: { text: 'バシャログ執筆' },
        20190517: { text: 'バシャログ出稿' }
      }
    };
    this.getTileClass = this.getTileClass.bind(this);
    this.getTileContent = this.getTileContent.bind(this);
  }

  // state の日付と同じ表記に変換
  getFormatDate(date) {
    return `${date.getFullYear()}${('0' + (date.getMonth() + 1)).slice(-2)}${('0' + date.getDate()).slice(-2)}`;
  }

  //日付のクラスを付与 (祝日用)
  getTileClass({ date, view }) {
    // 月表示のときのみ
    if (view !== 'month') {
      return '';
    }
    const day = this.getFormatDate(date);
    return (this.state.month_days[day] && this.state.month_days[day].is_holiday) ?
      'holiday' : '';
  }

  //日付の内容を出力
  getTileContent({ date, view }) {
    // 月表示のときのみ
    if (view !== 'month') {
      return null;
    }
    const day = this.getFormatDate(date);
    return (
      <p>
        <br />
        {(this.state.month_days[day] && this.state.month_days[day].text) ?
          this.state.month_days[day].text : ' '
        }
      </p>
    );
  }

  render() {
    return (
      <Calendar
        locale="ja-JP"
        value={this.state.date}
        tileClassName={this.getTileClass}
        tileContent={this.getTileContent}
      />
    );
  }
}

(※ ほんの少しだけスタイルいじっています。)

説明

Calendar コンポーネントに locale (言語), value (Date)プロパティを渡すと、日本語のカレンダーが表示されます。valueはなければ当月が表示されます。 tileCalssName では追加のクラスをつけられるので、今回は state.month_days で日付に is_holiday がついていたら holiday というクラスをつけ赤く表示しています。
tileContent は中身になるので state.month_days で日付にテキストがあれば、それを出力するようにしています。