flash-calendar
flash-calendar copied to clipboard
Possible bug and work-around: If calendarMinDateId is over 12months ago, it will never get rendered.
Hi @MarceloPrado,
Thanks for this lovely package. Really solid work you did with this.
I've encountered a possible bug for my use case. Basically, I have this fintech app am working on where I need customers to chose a custom date range to generate an account statement for that period. I am setting the calendarMinDateId
to the day you created your account and the calendarMaxDateId
to the current day.
It was all working well until if someone registered over 12 months ago, the calendar wouldn't render those. Basically it looked like the calendar rendered by default the last 12months. I guess this is related to this issue listed under the limitations.
By adding the calendarInitialMonthId
prop and setting it to less or equal to the calendarMinDateId
, it appears that this issue gets sorted since there'll never be legitimate need to infinite scroll backwards. However, this creates a scenario where (if the days between calendarMinDateId
and the current date or calendarMaxDateId
) is so big, then users will have to endlessly scroll forward till the possible required period.
To counter this, I realised that by adding an onLoad
callback to the Calendar.List
component, and scrolling back to the current day would fix this while also maintaining a predictable user experience.
My onLoad
call back looks like this basically.
const onCalendarLoad = useCallback(() => {
calendarRef?.current?.scrollToDate(new Date(), true);
}, []);
Then the implementation would look like this.
<Calendar.List
calendarMinDateId="2010-10-01"
calendarInitialMonthId="2010-10-01"
calendarMaxDateId="2024-05-19"
onLoad={onCalendarLoad}
ref={calendarRef}
/>