Range Calendar: Get first and last displayed date

[vbackeberg]

I have a range calendar that I want to get the first and last date from to make a backend query with that date range.

Does RangeCalendar expose any information on the date range it displays?
The placeholder date can help me get the first displayed date, but I am not sure how to get the last displayed date.

I have looked at this post which mentions a monthsVisible. That property is no available on the rangeCalendar, though.
#1379

[Nic-Polumeyv]

The children snippet of RangeCalendar.Root exposes months, and the visible bounds are its ends. Each month object carries its rendered weeks, including the leading and trailing cells that belong to the neighbouring months, so the first cell of the first week and the last cell of the last week are exactly what the user sees:

<RangeCalendar.Root bind:placeholder>
	{#snippet children({ months, weekdays })}
		{@const firstVisible = months[0].weeks[0][0]}
		{@const lastVisible = months.at(-1).weeks.at(-1).at(-1)}
		<!-- render the calendar as usual -->
	{/snippet}
</RangeCalendar.Root>

The cells are @internationalized/date objects, so firstVisible.toString() gives you an ISO date for the backend query. For refetching when the user pages to another month, watch the bound placeholder in an $effect, since navigation updates it and the months array is rebuilt from it.