React-Calendarライブラリで超簡単にカレンダーを作ってみる

本投稿は TECOTEC Advent Calendar 2020 の18日目の記事です。

こんにちは!決済認証システム開発事業部の咸(ハム)です。

現在、業務でReactを扱っているので、今回はReactのreact-calendarライブラリを使ってカレンダーを作成しようと思います。

react-calendarライブラリとは

簡単にReactでカレンダーを実装できちゃいます。 条件を絞って、日付ごとに任意の内容を表示させたり、スタイルのカスタマイズなど 柔軟に対応できます。

www.npmjs.com

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から見てみてください~   www.tecotec.co.jp