archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(date-range-picker): calendar-content width as per visible-months (#3505)

Browse Source
This commit is contained in:
Abhinandan 2024-07-18 23:04:13 +05:30 committed by GitHub
parent 5591138bff
commit 1fdbf2ad20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/short-garlics-wink.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/calendar": patch
"@nextui-org/theme": patch
---
Fixed the calendarContent width as per visible month

2
packages/components/calendar/src/use-calendar-base.ts
View File

@ -279,7 +279,7 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
"data-has-multiple-months": dataAttr(hasMultipleMonths), "data-has-multiple-months": dataAttr(hasMultipleMonths),
style: { style: {
// @ts-ignore // @ts-ignore
"--visible-months": visibleMonths, "--visible-months": typeof visibleMonths === "number" ? `${visibleMonths}` : visibleMonths,
"--calendar-width": typeof calendarWidth === "number" ? `${calendarWidth}px` : calendarWidth, "--calendar-width": typeof calendarWidth === "number" ? `${calendarWidth}px` : calendarWidth,
} as React.CSSProperties, } as React.CSSProperties,
}; };

4
packages/core/theme/src/components/date-picker.ts
View File

@ -13,8 +13,8 @@ const datePicker = tv({
selectorButton: "-mr-2 text-inherit", selectorButton: "-mr-2 text-inherit",
selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0", selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
popoverContent: "p-0 w-full", popoverContent: "p-0 w-full",
calendar: "w-[var(--calendar-width)] shadow-none", calendar: "w-[calc(var(--visible-months)_*_var(--calendar-width))] shadow-none",
calendarContent: "w-[var(--calendar-width)]", calendarContent: "w-[calc(var(--visible-months)_*_var(--calendar-width))]",
timeInputLabel: "font-medium", timeInputLabel: "font-medium",
timeInput: "px-5 pb-4 flex-wrap gap-x-6", timeInput: "px-5 pb-4 flex-wrap gap-x-6",
}, },