react-flatpickr icon indicating copy to clipboard operation
react-flatpickr copied to clipboard

Weekdays header expands to long when option showMonth is depending on state and switches from two to one month view

Open valagja opened this issue 4 years ago • 0 comments

Hi when I define a state like this

const [numberOfMonthShown, setNumberOfMonthShown] = useState(numberOfMonth());

and define flatpickr like this (number of month shown depending on the state)

            <Flatpickr
              onChange={(selectedDates, representation, instance) => doCheckSelectedPeriod(selectedDates, instance)}
              onClose={(selectedDates) => doOnClose(selectedDates)}
              options={
                {
                  dateFormat: "l d M",
                  defaultDate: defaultRange(),
                  mode: "range",
                  showMonths: numberOfMonthShown,
                  shorthandCurrentMonth: true,
                  locale: { firstDayOfWeek: 1},
                  wrap: true,
                }
              }
            >

and the state numberOfMonthShown changes from 2 to 1 and I open the date picker the first time it opens and shows (like expected) one month but the weekday header is too long. If I then close and then open the date picker the second time it is fine (and keeps being fine). See this screenshot from the first opening. Screenshot 2020-03-20 at 11 33 03 The change of the numberOfMonth state is triggered by an event listener that listens to the resize event. So the intention is to show one month if the screen is small and have a two month view if the screen is large. Thanks in advance!

valagja avatar Mar 20 '20 11:03 valagja