bug (ui): Fix Calendar Navigation

[wrsulliv]

Please read and mark the following check list before creating a pull request:

• I read and followed the CONTRIBUTING.md guide.
• I read and followed the New Feature Checklist guide.

Short description of what this resolves:

Currently the left / right navigation buttons on the "Calendar" component do not update the Calendar header.

#713

Solution

I use the visibleDate state variable on baseCalendar instead of invoking the scrollToIndex function on calendarPager.

Problem

When calling the function directly, only the inner child of baseCalendar is updated: viewPager. This leaves the visibleDate state variable unchanged, which is what drives the header and other children of baseCalendar.

Next Steps

This may help resolve the left / right navigation problem, but there are at least two remaining problems:

1. The header does not change properly at year boundaries.
2. Swiping does not work as expected. This is because it's still only updating the internal component. To fix this, one idea is to pass a callback, enabling viewPager to inform its parents when it changes: Calendar UI Bug: Page Sliding - Invalid Header #712

[artyorsh]

Hi! Thanks for reporting and opening a PR! 👍

When calling the function directly, only the inner child of baseCalendar is updated: viewPager.

Notice, the current implementation should work as expected since by pressing a button in the header, we call pager's scrollTo. Then, when the pager is finished scrolling, onDayPickerPagerSelect is called to update a visibleDate.

I tried to reproduce this bug in iOS, Chrome and Safari. I also tried to review live examples in the documentation and everything worked fine for me.

Running your code I noticed a small delay between the button click action and pager scrolling. Can share more details on this bug: Chrome / Safari version, user behavior?

[wrsulliv]

Hi @artyorsh ! Thanks for the reply and the awesome package!

My apologies, I missed the callback in viewPager which updates baseCalendar .

However, I did some testing, and I believe this problem exists for users with a negative timezone offset. For example, I'm in Eastern Time (-4), so the min date calculated in baseCalendar is Dec. 2018 instead of Jan. 2019.

If you change your system time you should be able to reproduce the issue.

I can look into a PR for this if you'd like? My strategy would be to calculate all calendar dates in T+0, then add the user's timezone offset.

[artyorsh]

@wrsulliv

I can look into a PR for this if you'd like? My strategy would be to calculate all calendar dates in T+0, then add the user's timezone offset.

Yes, let's create a new one if it could be a possible solution. Thanks for the explanation :)