RX100で撮り歩くブログ

RX100で撮った写真を中心によりよい生活を目指すブログ

Ant DesignのCalendar UIを使ってみた

カレンダーを実装しようと思って使ってみました。なかなかしっくり来るカレンダーライブラリがなかったですが、Ant Designのカレンダーがちょうどよかったです。

ant.design

ただ、カレンダーに内容を表する場合に公式のExampleだと日付だけで判定していて、毎月表示されてしまうのでちょっと手を加えました。

以下のように年月も含めてフォーマットし比較することで、特定の日付に内容をいれることができます。

// 年月も含めてフォーマットする
const getFormatDate = (date) => {
  return `${date.year()}-${('0' + (date.month() + 1)).slice(-2)}-${(
      '0' + date.date()
    ).slice(-2)}`
}

// Cellに内容を表示

const dateCellRender = (value) => {
    const listData = diaryList.filter((item) => {
      return (
        moment(item.createdAt).format('YYYY-MM-DD') === getFormatDate(value)
      )
    })

    return (
      <div>
        <div>
          {value.date()}
        </div>
      </div>
    )
  }


<Calendar
  dateFullCellRender={dateCellRender}
  onSelect={selectDate}
  fullscreen={false}
/>

dateFullCellRenderを使うと日付項目のエリアを全てカスタマイズできます。デフォルトのデザインのまま内容の部分だけスタイリングして追加したい場合は、dateCellRenderを使います。