feat(Calendar): add onVisibleMonthsChange callback to calendars and date pickers

[hmnd]

Resolves part of #1379

Adds onVisibleMonthsChange callback to both calendars and both date pickers. This allows end users to react to the displayed dates changing, eg. in order to load relevant availability data as the user navigates.

I followed the approach currently used for the onStartValueChange callback, but am open to feedback if a different approach might be better.

I ran into an issue where setting the initial months within the constructor on the boxed months value wouldn't trigger an update to relevant getters server-side. That resulted in a blank calendar rendering server side before populating client side. My workaround is to have an internal getter for months that defaults to the initial months when the boxed months array is blank.

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
bits-ui	✅ Ready (View Log)	Visit Preview	1a2c890

[huntabyte]

Hey there @hmnd!

We typically don't expose listeners/handlers for properties that we don't adjust internally, meaning the visibleMonths prop is read-only from Bits UI's perspective. The developer passes that prop and can control it in userland, meaning they can hook into their specific implementation.

To determine what months are visible, you can use a combination of the placeholder and visibleMonths to determine that.

[hmnd]

Hey @huntabyte, thanks for taking a look at this.

As far as I'm aware, visibleMonths isn't currently exposed or controllable from userland. Because of that, I followed the implementation of onStartValueChange instead, internally exposing months to the svelte components to achieve that. Placeholder is also not terribly helpful, as it doesn't provide the end date in range calendars and doesn't provide the actual visible range (although this can technically by calculated by the developer, but that feels like unnecessary doubling of effort).

Thus I think either a handler like I've implemented or a read-only binding to months or visibleMonths is necessary.

[huntabyte]

Ah, I see what you mean. I was thinking of numberOfMonths instead of visualMonths. Let me review this and think on it a little bit!

[hmnd]

Happy to discuss/provide feedback in chat on discord if preferred too - @.hmnd on there :)

Thanks!

[changeset-bot]

🦋 Changeset detected

Latest commit: 1a2c890

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
bits-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR