本投稿は TECOTEC Advent Calendar 2020 の18日目の記事です。
こんにちは!決済認証システム開発事業部の咸(ハム)です。
現在、業務でReactを扱っているので、今回はReactの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: It's Sunday! : null |
まとめ
Reactって便利ですね! 今回の記事では説明していませんが、Reduxと合わせてDBからデータを引っ張ってきてstateで制御すれば、スケジュールを登録したり、表示させたりすることも可能ですよ~!今回記載している以外にもたくさんPropsの種類もあるので、気になる方はぜひ公式URLから見てみてください~ www.tecotec.co.jp