React-calendar: Select multiple dates?

[baba43]

Hey there,

first of all, let me say thanks for this awesome library. It looks very nice and it work's smooth.

However, what I need is a calendar where the user can pick multiple dates (not ranges).
Is this somehow possible right now?

[wojtekmaj]

Hello,
no, it's not possible at the moment. It seems like it'd be a nice improvement though. Sadly, I can't give you any timeframe for the time being.

[nshoes]

Implemented this today by using a component as a state container. It was pretty easy! Leaving this here for anyone else:

import ReactCalendar from 'react-calendar/dist/entry.nostyle'

// helpers
const dateAlreadyClicked = (dates, date) => dates.some(d => dayjs(date).isSame(dayjs(d), 'day'))
const datesExcept = (dates, date) => dates.filter(d => !dayjs(date).isSame(dayjs(d), 'day'))

const Calendar = ({ classes }) => {
  const [dates, setDates] = useState([])

  const onClickDay = date => {
    // if day is already clicked, remove it from state
    if (dateAlreadyClicked(dates, date)) setDates(datesExcept(dates, date))
    else setDates([...dates, date])
  }

  const tileClassName = ({ date }) => {
    const classNames = [classes.dayTile]
    // give active days a special class
    if (dateAlreadyClicked(dates, date)) return [classes.activeDay, ...classNames]
    return classNames
  }

  return (
    <ReactCalendar
      tileClassName={tileClassName}
      onClickDay={onClickDay}
    />
  )
}