Calendar doesn't respect disableDaysOutsideMonth={false}

[weaseldotro]

Describe the bug

I'm using disableDaysOutsideMonth={false} in the calendar component and the days outside the current month still show as disabled.

Reproduction

reproduction repo is using svelte 4, this issue is for svelte 5

Logs

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (10) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 14.43 GB / 24.94 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    npm: 11.2.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/kit: 2.20.7 => 2.20.7 
    bits-ui: ^1.3.19 => 1.3.19 
    svelte: 5.28.2 => 5.28.2

Severity

annoyance

[huntabyte]

Can you elaborate what you mean by "show as disabled"? Do the days have aria-disabled="true" / data-disabled attributes?

[weaseldotro]

See attached screenshot. The days 30 and 31 from the March and 1, 2, 3 from May show as disabled in the calendar, even though they should be enabled.

Code:

<Calendar disableDaysOutsideMonth={false} />

Which means that those days should also be enabled (selectable), right?

[huntabyte]

You need to adjust the styles, if you notice in the classes you likely have pointer events none and different styles it for "data-outside-months".

[weaseldotro]

I'm sorry, I just noticed that I accidentally posted this issue in the wrong repo. I'm using actually shadcn-svelte, not bits-ui. Should I close this issue and post it in the other repo?

I looked into adjusting the styles but I couldn't find any css classes in the calendar source files: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/calendar

[douglasward]

I just ran into this as well. The docs say that disableDaysOutsideMonth is false by default, yet the calendar shown in the docs has them disabled:

<td class="p-0! relative size-10 text-center text-sm" id="bits-728" role="gridcell" aria-selected="false" aria-disabled="true" data-outside-month="" data-outside-visible-months="" data-value="2025-06-05" data-type="date" data-disabled="" data-bits-calendar-cell="">
   <!----><!---->
   <div class="rounded-9px text-foreground hover:border-foreground data-selected:bg-foreground data-disabled:text-foreground/30 data-selected:text-background data-unavailable:text-muted-foreground data-disabled:pointer-events-none data-outside-month:pointer-events-none data-selected:font-medium data-unavailable:line-through group relative inline-flex size-10 items-center justify-center whitespace-nowrap border border-transparent bg-transparent p-0 text-sm font-normal" id="bits-729" role="button" aria-label="Thursday, June 5, 2025" aria-disabled="true" data-outside-month="" data-outside-visible-months="" data-value="2025-06-05" data-type="date" data-disabled="" data-bits-calendar-day="" data-bits-day="">
      <!---->
      <div class="bg-foreground group-data-selected:bg-background group-data-today:block absolute top-[5px] hidden size-1 rounded-full"></div>
      5<!---->
   </div>
   <!---->
</td>

and locally even with disableDaysOutsideMonth set to false it's the same.