React-calendar: Setting selected date after onChange

[nguyenkhoi2806]

Hi. Can I change active date after click date event ??? thanks you

[wojtekmaj]

Hi,
what do you mean by active date?

If you mean the date the calendar is opened on: Use onChange or onClickDate to get an event when the user clicks the date, and set activeStartDate prop after that to whatever date the calendar should display.

If you mean the date selected: Use onChange to get an event when the user selects a dite, and set value props after that to the date calendar should select.

[nguyenkhoi2806]

That mean when i select a date, i don't want it is selected or show active on calendar which some condition for this date, instead that i want to back the previous the date selected. Do you clear ?
Thanks your respond but i found the way to solve my situation !

[jhammersholt]

@nguyenkhoi2806 Mind sharing what you did?

[gcangussu]

I have the same problem, I need a way of having the Calendar as a fully controlled component. It should only highlight the range I give it by the value prop.
The primitives types like input do this by checking if the value prop is set to any value different from undefined. If it is they use the value and ignore their internal state.
What happens now is that when I click on some day in the calendar it highlights that day and ignores the value I'm supplying to it.

[nshoes]

👍 to all of this. Checking out this library right now but need a controlled input and passing a Date to the value prop doesn't seem to control anything, despite what the docs say.

[nshoes]

I actually solved this myself as I was exploring selecting multiple dates. I shared this in #136, but I'll copy pasta here for reference.

Using the unstyled component allows you to ignore the internal state of the calendar and "control" it yourself:

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}
    />
  )
}

[mahamshahid18]

Thanks @nshoes 👍

As he mentioned, when you're using the unstyled version of the Calendar, use the onClickDay handler instead of the onChange one to get the changed value of the Date :)

[wojtekmaj]

Y'all might be interested in what's going on for React-Calendar 3.0: #216

There will be finally a way to have the calendar fully controlled. Comments are welcome in the thread linked.

[wojtekmaj]

Closing as #217 is merged.