CODEWITHSUNDEEP
javascriptreactjsreact-calendar
Kayote
Kayote

Reputation: 15617

React-Calendar month view change

I am using React-Calendar and I am unable to change the month bu clicking the arrows (back/ forward) in the navigation panel, where the month name is displayed. My code:

...
  const onActiveStartDateChangeHandler = ({ activeStartDate, value, view }) => {
    console.log("vv:", activeStartDate, value, view);
  };

...
  return (
    <div className="popupFormSelector arrowLft pb-8">
      <h2 className="text-center font-bold mt-7 mb-5">Set a deadline</h2>
      <Delete classes="right-5 top-5" onClickHandler={toggleCalendar} />
      <Calendar
        activeStartDate={teamStartDate}
        calendarType="US"
        defaultView="month"
        maxDetail="month"
        maxDate={endDate}
        minDate={teamStartDate}
        next2Label={null}
        onActiveStartDateChange={onActiveStartDateChangeHandler}
        onChange={onChangeHandler}
        prev2Label={null}
        selectRange={false}
        showDoubleView={false}
        showFixedNumberOfWeeks={false}
        showNavigation={true}
        showNeighboringMonth={true}
        tileClassName={tileClasses}
        tileDisabled={({ activeStartDate, date, view }) =>
          date < teamStartDate || date > endDate
        }
        value={new Date()}
        view={"month"}
      />

From console.log on handler for onActiveStartDateChange, I can see that the date is changed in the log, however, the view stays at the current month. What am I doing wrong?

Upvotes: 0

Views: 5075

Answers (1)

gru
gru

Reputation: 3069

The month view doesn't change because it is tied to the value you provided here:

activeStartDate={teamStartDate}

As stated in the docs, this initiates a "controlled" behavior:

activeStartDate The beginning of a period that shall be displayed. If you wish to use React-Calendar in an uncontrolled way, use defaultActiveStartDate instead.

So either use defaultActiveStartDate instead of activeStartDate if it matches your use case, or you could simply update the value of teamStartDate in the method, like this:

const onActiveStartDateChange = ({activeStartDate}) => teamStartDate = activeStartDate

Upvotes: 2

Related Questions