Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
valagja opened this issue Mar 20, 2020 · 0 comments

Comments

@valagja
Copy link

valagja commented Mar 20, 2020

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant