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

…3505)
nextui-org · Jul 18, 2024 · 1fdbf2a · 1fdbf2a
1 parent 5591138
commit 1fdbf2a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/short-garlics-wink.md b/.changeset/short-garlics-wink.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/theme": patch
+---
+
+Fixed the calendarContent width as per visible month
diff --git a/packages/components/calendar/src/use-calendar-base.ts b/packages/components/calendar/src/use-calendar-base.ts
@@ -279,7 +279,7 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
     "data-has-multiple-months": dataAttr(hasMultipleMonths),
     style: {
       // @ts-ignore
-      "--visible-months": visibleMonths,
+      "--visible-months": typeof visibleMonths === "number" ? `${visibleMonths}` : visibleMonths,
       "--calendar-width": typeof calendarWidth === "number" ? `${calendarWidth}px` : calendarWidth,
     } as React.CSSProperties,
   };

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