あなたの反応アプリにカレンダーを追加する

二ヶ月前、私は80人(実質的にもちろん)の前で発表しました.プレゼンテーションの後、私はカレンダーライブラリを実装し、動的に日付をユーザークリックに基づいてデータをレンダリングに関するいくつかの質問を受けました.

要求されるように、ここでは1つのシンプルで強力な反応ライブラリの助けを借りてインタラクティブなカレンダーを構築する私の小さな旅です.

反応カレンダーライブラリの活用

そこにはたくさんのカレンダーライブラリがあります.React-Calendar .

ドキュメントは明確で初心者に優しいです.私がしたすべては、TLの3つのステップに続きました;博士部門

実行することでインストールするnpm install react-calendar or yarn add react-calendar .

追加による輸入import Calendar from 'react-calendar' .

追加による使用<Calendar /> . 用途onChange 新しい値を得るためのprop.

そして、Vil引き-我々は、ちょうどゼロから1を切り刻むことなくカレンダーを建設しました!すべての雹オープンソースコミュニティ🙌

カレンダーをデータに接続する

クール、我々のページによくフォーマットカレンダーがあります.どのように我々はカレンダー日付を我々のデータで指定された日付に接続するかもしれませんか?
反応カレンダードキュメントでは、あるbasic usage section 著者が使用した場所onChange prop現在の日付を保存する

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

class MyApp extends Component {
  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date })

  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
        />
      </div>
    );
  }
}

ここでは、私の簡素化された、機能的なコンポーネントバージョンは、反応フックを利用します:

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

export default function Results() {
    // set states of calendar date
    const [calDate, setCalDate] = useState(new Date())

    function onChange (calDate) {
        // change results based on calendar date click
        setCalDate(calDate)
    }

    return (
        <div className="result-calendar">
            <Calendar onChange={onChange} value={calDate} />
        </div>
    )

}

そして、私の中にonChange 関数を使ってデータを取得しました(userResults ), 現在の強調表示されたカレンダー日付に対して、それらを比較し、同じ日付でそれらを表示します.
トリック-と私にとって最大の課題は、データ内の日付形式を反応カレンダーのものと一致させることでした.
ここに私の完全なコードの断片があるonChange 機能

function onChange (calDate) {
    setCalDate(calDate)

    const filteredResults = userResults.filter(result => {
        const newResultFormat = new Date(result.created_at).toLocaleString().split(",")[0]
        const newCalDateFormat = calDate.toLocaleString().split(",")[0]
        return newResultFormat === newCalDateFormat
    })
}

スタイリング

最後に、しかし、少なくとも、あなたはフォントと色で、ライブラリと付属のCSSのおかげで遊ぶことができます.
まず最初に、あなたのJSファイルにCSSをインポートすることを忘れないでください.

import 'react-calendar/dist/Calendar.css';

次に、独自のスタイルシートで、あなたのアプリケーションに合ったカスタムスタイリングを調整します.私のアプローチは、コンソールの要素インスペクタでディスプレイを表示し、どのセレクターがどのレイアウトを制御しているかを調べ、それに応じてスタイルを調整します.

.react-calendar__month-view__weekdays {
  color: gray;
}

.react-calendar__navigation button {
  font-size: 1em;
}

正直なところ、私は実装が働くだろうと確信していませんでした、それが私の最初の反応フックReduxアプリへの外部反応ライブラリを取り入れていたことを考慮して.
それがわかるように、タスクは私が想像したように困難ではなかった.
したがって、この経験からの最大の離職は以下の通りです.私たちは皆、自分自身に少しの信頼を持つ必要があります.ちょうどその最初のステップを取ることを得た、もう一度試してみてください.