Possible bug and work-around: If calendarMinDateId is over 12months ago, it will never get rendered.

[Kasendwa]

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}
  />

[MarceloPrado]

Hi @Kasendwa, I'm happy to hear you're enjoying the package!

When it comes to the issue you've mentioned, I'd suggest you use the approach documented here. I believe they achieve the same goals as far as I understood your issue. However, I think the story example is slightly cleaner, since the calendar initializes with the right configuration vs. needing a separate render pass to achieve the desired end state.

Let me know if it helps