I'm so confused. The (github) widget works well on desktop, but something breaks on mobile browsers. I want (1) the css and (2) the this.props.date to be updated, on mobile as it is on desktop browsers. look at the (deleted from my codesandbox to save room, run from github, it is create-react-app) on desktop, and then look at it on mobile to notice these issues. I don't know specifically where in the code the mobile browsers is wrong. It is not polyfill startPad with create-react-app, I took that out. Is there another problem with create-react-app webpack I'm hitting?
codesandbox-code Edit: I deleted this when I was cleaning my github, you can see an optimized version of the calendar for use at https://codesandbox.io/s/recursing-paper-4vosh or https://github.com/NickCarducci/Wavepoint.la
Nearly three months later I reconstructed Glad's component to not use functions inside jsx, but that wasn't the problem (although I think it is better practice, right?)
(fixed, but not a clear answer) The problem was symptomatic of css designation for {inMonth}
variable, which I made state and moved around... to parent component... basedate
was the issue in a function isSameMonth()
which somehow was getting the browsing date on Desktop, but not on mobile
(link to codesandbox Month component) anyway, here is my version of Glad's calendar, a lot easier to customize if you learned React post-2018, I guess
https://codesandbox.io/s/recursing-paper-4vosh?file=/src/components/Calendar/FullCalDrawer/MonthCalSlider.js (Tap bottom-right circle [half-way covered by 'open sandbox on mobile], Thumbprint logo to open calendar, then top left dots icon to open monthly view)... shows {inMonth}
designation for in Child component's css on mobile now
This will also be on https://github.com/Wavepoint.la a day or so after this post (I tried making it a codepen & jsbin but failed, need to move on)