[Reactカレンダーライブラリ]日付の下に文字を描画したい

Question

前提・実現したいこと

https://github.com/hernansartorio/react-nice-dates/tree/master/src
上のReactカレンダーライブラリを使用しているのですが、それぞれの日付の下側に小さく文字を描画したいと思っています。
ちなみに、ここ（https://reactnicedates.hernansartorio.com/）で解説されている複数日程を選択できるコンポーネントを利用しています。
日付を描画しているコンポーネント(CalendarGrid.js)でdaysと同じ領域で<p>OK</p>とすればできると思ったのですが、うまくいきません。
わかる方がいましたらコメントお願いします。

該当のソースコード

function CalendarGrid(_ref) {
  var locale = _ref.locale,
    month = _ref.month,
    modifiers = _ref.modifiers,
    modifiersClassNames = _ref.modifiersClassNames,
    onMonthChange = _ref.onMonthChange,
    onDayHover = _ref.onDayHover,
    onDayClick = _ref.onDayClick,
    transitionDuration = _ref.transitionDuration;
  var grid = useGrid({
    locale: locale,
    month: dateFns.startOfMonth(month),
    onMonthChange: onMonthChange,
    transitionDuration: transitionDuration
  });
  var startDate = grid.startDate,
    endDate = grid.endDate,
    cellHeight = grid.cellHeight,
    containerElementRef = grid.containerElementRef,
    isWide = grid.isWide,
    offset = grid.offset,
    origin = grid.origin,
    transition = grid.transition;
  var days = dateFns.eachDayOfInterval({
    start: startDate,
    end: endDate
  }).map(function (date) {
    return React__default.createElement(CalendarDay, {
      date: date,
      height: cellHeight,
      key: dateFns.lightFormat(date, 'yyyy-MM-dd'),
      locale: locale,
      modifiers: _objectSpread2({}, computeModifiers(modifiers, date), {
        outside: !dateFns.isSameMonth(date, month),
        wide: isWide
      }),
      modifiersClassNames: modifiersClassNames,
      onHover: onDayHover,
      onClick: onDayClick
    });
  });
  return React__default.createElement("div", {
    className: "nice-dates-grid",
    style: {
      height: cellHeight * 6
    }
  }, React__default.createElement("div", {
    className: classnames('nice-dates-grid_container', {
      '-moving': offset,
      '-origin-bottom': origin === ORIGIN_BOTTOM,
      '-origin-top': origin === ORIGIN_TOP,
      '-transition': transition
    }),
    ref: containerElementRef,
    style: {
      transform: "translate3d(0, ".concat(offset, "px, 0)"),
      transitionDuration: "".concat(transitionDuration, "ms")
    }
  }, days)), React__default.createElement("p", {　//追加した箇所　ここから
    className: classnames('nice-dates-grid_container', {
      '-moving': offset,
      '-origin-bottom': origin === ORIGIN_BOTTOM,
      '-origin-top': origin === ORIGIN_TOP,
      '-transition': transition
    }),
    ref: containerElementRef,
    style: {
      transform: "translate3d(0, ".concat(offset, "px, 0)"),
      transitionDuration: "".concat(transitionDuration, "ms")
    }
  }, OK);// ここまで
}
CalendarGrid.propTypes = {
  locale: propTypes.object.isRequired,
  month: propTypes.instanceOf(Date).isRequired,
  modifiers: propTypes.objectOf(propTypes.func),
  modifiersClassNames: propTypes.objectOf(propTypes.string),
  onMonthChange: propTypes.func.isRequired,
  onDayHover: propTypes.func,
  onDayClick: propTypes.func,
  transitionDuration: propTypes.number.isRequired
};
CalendarGrid.defaultProps = {
  modifiers: {},
  transitionDuration: 500
};

Answer 1

想像ですが、上記みたいな感じにしたいのだと思います。
その場合は変更する箇所が違っています。
変更箇所はCalendarDay関数の中です。

--余計なおせっかい
ただし、正直おすすめはしません。
厳しいようですが、まだ技術力がライブラリを拡張できるほどないとみられるところです。
理由は以下の通りです。
①変更を加える箇所が見つけられない。これはブラウザの開発者モードで簡単に特定できます。
②提示された変更のコードに不備がある
これだと日にちの次にPタグではなく、日にちをPタグで上書きしてしまいPタグしか表示されなくなります。

}, days)), React__default.createElement("p", {　//追加した箇所　ここから

OKが変数宣言されてないので、"OK"のように文字列で扱うかしないと実行時にエラーになります。

}, OK);// ここまで

③ @ryota8976さんのケースに該当するかわかりませんが、
会社などで複数人でGitなどでソースを管理して開発する場合で、
かつreact-nice-datesをnpmでパッケージ管理している場合は、他の人にはこの変更が反映されません。
反映させるためには、パッケージ管理をやめて、変更を加えたreact-nice-datesを別管理するなどの手間が増えます。

④そして何よりも、この段階で躓いていると、
次に現状"OK"固定のものを、日付ごとに異なった内容を表示させたいなどの拡張を考えた場合に
茨の道しか見えないところです。

Comments

[aiai8976]

回答ありがとうございます。
勉強し終わってから色々触るのではなく、作りたいものを作るのに必要なものを勉強していくという方式を取っているためまだまだ実力不足なのは承知しています。
助言いただいた通り、今回のやり方はやめて他の方法を考えたいと思います。
また、①のやり方だけ教えていただいても大丈夫でしょうか。

[storm3]

開発者モードを使うのはWebアプリを開発するには必須になるので、ググって使い方を覚えたほうが良いです。
ブラウザの開発者モードで今回変更したかった「日にち」付近のHTMlを表示すると、「日にち」のspanタグにclass属性がついてます。
そのクラス名でreact-nice-datesのライブラリのファイル内を検索して探します。
今回はたまたま一致するクラス名を使っている個所がCalendarDay関数にしかなかったので特定が簡単にできました。もし複数個所にあった場合は、console.logを埋め込んで実際呼び出されている個所を特定します。

[aiai8976]

ありがとうございます。