#How to get all "rendered" days from the calendar component?

3 messages · Page 1 of 1 (latest)

shut plankBOT
#

Hi @verbal yarrow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Nuxt UI’s UCalendar API doesn’t expose a list of “rendered days” directly, and the docs don’t mention any event or prop that returns all visible cells. The only related reactive handles documented are:

  • placeholder / defaultPlaceholder (current visible month “page”) [Calendar props]
  • fixedWeeks, weekStartsOn, numberOfMonths, disableDaysOutsideCurrentView (which together define what is rendered) [Calendar props]
  • the day slot, which gives you a day object per rendered cell [Calendar slots]

Because of that, there is no built‑in way (in the docs) to “get all rendered days” as an array.

Given what is documented, you have two realistic options:

1. Use placeholder + calendar props (what you’re already doing)

Your idea of watching placeholder is exactly what the component exposes for “current page” control. placeholder is meant to represent the current visible month (or page) and is also what nextPage / prevPage functions receive. [Calendar props]

You can:

  • Watch placeholder (and numberOfMonths, fixedWeeks, weekStartsOn, disableDaysOutsideCurrentView if you use them).
  • Compute the full set of visible dates (including previous/next month fillers) based on those values.
  • Only refetch when the page changes, not when the selected date changes.

To avoid refetching on every selection, you can compare the previous and new placeholder “page” (e.g. year+month, or month range when using numberOfMonths) and only hit the database when that changes.

The docs don’t provide a ready‑made helper for “all visible days including fillers”, so this calculation has to be done on your side.

#

2. Use the day slot to collect days (but still no official pattern)

The day slot receives day (a DateValue from @internationalized/date) for each rendered cell. [Calendar slots] In theory you could:

<UCalendar v-model="value">
  <template #day="{ day }">
    <!-- register day in a Set/Map here -->
    {{ day.day }}
  </template>
</UCalendar>

…but the documentation does not describe or endorse using the slot this way (e.g. no lifecycle guarantees about when all days are rendered), so this pattern is not documented or supported in the sources.

So, based on the docs alone:

  • There is no documented API to directly get “all rendered days”.
  • The supported way to know which month(s) are visible is via placeholder (and numberOfMonths, fixedWeeks, etc.), and you must derive the visible dates yourself. [Calendar props]

If you need something more precise than that (e.g. an official “visibleDays” API), it’s not mentioned in the current documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: