[Reactカレンダーライブラリ]描画の色を変えたい

Question

前提・実現したいこと

https://github.com/hernansartorio/react-nice-dates/tree/master/src
上のReactカレンダーライブラリを使用しているのですが、色の変更の仕方がわかりません。
ここ（https://reactnicedates.hernansartorio.com/）で解説されている複数日程を選択できるものがありますが、クリックした時にprimaryの円が日付上に描画されるようになっています。primary以外にsecondaryや他の色を使い分けたいと思っているのですが、どこを探してもそのような記述がありません。
わかる方がいましたらコメントお願いします。

該当のソースコード

import React, { useState } from 'react'
import { isSameDay } from 'date-fns'
import { enGB } from 'date-fns/locale'
import { Calendar } from 'react-nice-dates'
import 'react-nice-dates/build/style.css'
// Very rough implementation of multiple date selection
export default function CalendarExample() {
  const [selectedDates, setSelectedDates] = useState([])
  const modifiers = {
    selected: date => selectedDates.some(selectedDate => isSameDay(selectedDate, date))
  }
  const handleDayClick = date => {
    setSelectedDates([...selectedDates, date])
  }
  return (
    <Calendar onDayClick={handleDayClick} modifiers={modifiers} locale={enGB} />
  )
}

Calendar.js

import React from 'react'
import { func, instanceOf, object, objectOf, string } from 'prop-types'
import { startOfMonth } from 'date-fns'
import { isSelectable, mergeModifiers } from './utils'
import useControllableState from './useControllableState'
import CalendarNavigation from './CalendarNavigation'
import CalendarWeekHeader from './CalendarWeekHeader'
import CalendarGrid from './CalendarGrid'

export default function Calendar({
  locale,
  month: receivedMonth,
  modifiers: receivedModifiers,
  modifiersClassNames,
  minimumDate,
  maximumDate,
  onMonthChange,
  onDayHover,
  onDayClick,
  weekdayFormat
}) {
  const [month, setMonth] = useControllableState(receivedMonth, onMonthChange, startOfMonth(new Date()))

  const modifiers = mergeModifiers(
    { disabled: date => !isSelectable(date, { minimumDate, maximumDate }) },
    receivedModifiers
  )

  return (
    <div>
      <CalendarNavigation
        locale={locale}
        minimumDate={minimumDate}
        maximumDate={maximumDate}
        month={month}
        onMonthChange={setMonth}
      />

      <CalendarWeekHeader locale={locale} weekdayFormat={weekdayFormat}/>

      <CalendarGrid
        locale={locale}
        modifiers={modifiers}
        modifiersClassNames={modifiersClassNames}
        month={month}
        onMonthChange={setMonth}
        onDayHover={onDayHover}
        onDayClick={onDayClick}
      />
    </div>
  )
}

Calendar.propTypes = {
  locale: object.isRequired,
  minimumDate: instanceOf(Date),
  maximumDate: instanceOf(Date),
  modifiers: objectOf(func),
  modifiersClassNames: objectOf(string),
  month: instanceOf(Date),
  onMonthChange: func,
  onDayHover: func,
  onDayClick: func,
  weekdayFormat: string
}

他のソースは以下に掲載されています。
https://github.com/hernansartorio/react-nice-dates/tree/master/src

Answer 1

軽くライブラリのソースとドキュメントを見ましたが、2色以上の選択状態はサポートされていないように見えます。
ライブラリの説明にあるのが「A responsive, touch-friendly, and modular date picker library for React.」でdate pickerとなっています。
あくまで、date pickerは「日付を選択するUIパーツ」であってカレンダーのUIではありません。なので、おそらくサポートされていないと思います。

質問にあるよう複数の日付を扱うカレンダーを探しているのであれば、カレンダー用に作られたUIライブラリを使うか自作をするのがよさそうです。

Comments

[aiai8976]

回答ありがとうございました。