Skip to content

fix: let calendar use container width (#10209)#10260

Open
aakarsh12x wants to merge 2 commits intoshadcn-ui:mainfrom
aakarsh12x:fix/calendar-full-width-10209
Open

fix: let calendar use container width (#10209)#10260
aakarsh12x wants to merge 2 commits intoshadcn-ui:mainfrom
aakarsh12x:fix/calendar-full-width-10209

Conversation

@aakarsh12x
Copy link
Copy Markdown

@aakarsh12x aakarsh12x commented Apr 1, 2026

What's the problem?

The Calendar component used w-fit on its root class, which caused it to shrink-wrap its content instead of filling the available container width. This made it impossible to use the calendar in full-width layouts (e.g., dashboard cards, sidebars, date range pickers).

Reported in #10209.

What changed?

Changed w-fit -> w-full on the root class across all calendar variants and style themes.

Files updated:

  • apps/v4/registry/new-york-v4/ui/calendar.tsx
    • apps/v4/registry/bases/radix/ui/calendar.tsx
    • apps/v4/registry/bases/base/ui/calendar.tsx
    • All apps/v4/styles/*/ui/calendar.tsx variants (radix-nova, radix-luma, radix-vega, radix-mira, radix-maia, radix-lyra, base-nova, base-luma, base-vega, base-mira, base-maia, base-lyra, including RTL)
    • apps/v4/examples/base/calendar-hijri.tsx
    • apps/v4/examples/radix/calendar-hijri.tsx

Before / After

Before After
root: cn("w-fit", defaultClassNames.root) root: cn("w-full", defaultClassNames.root)

The calendar now fills its container width, consistent with how month, week, table, and weekday already use w-full.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 1, 2026

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant