) {
return (
-
diff --git a/src/ui/components/core/calendar.tsx b/src/ui/components/core/calendar.tsx
index 7af68a1..26fca51 100644
--- a/src/ui/components/core/calendar.tsx
+++ b/src/ui/components/core/calendar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import {
ChevronLeftIcon,
ChevronRightIcon,
@@ -8,6 +10,7 @@ import {
DayPicker,
getDefaultClassNames,
type DayButton,
+ type Locale,
} from 'react-day-picker';
import { Button, buttonVariants } from '~/ui/components/core/button';
@@ -19,6 +22,7 @@ function Calendar({
showOutsideDays = true,
captionLayout = 'label',
buttonVariant = 'ghost',
+ locale,
formatters,
components,
...props
@@ -32,14 +36,15 @@ function Calendar({
showOutsideDays={showOutsideDays}
className={cn(
'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
- `rtl:**:[.rdp-button\\_next>svg]:rotate-180`,
- `rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className,
)}
captionLayout={captionLayout}
+ locale={locale}
formatters={{
formatMonthDropdown: (date) =>
- date.toLocaleString('default', { month: 'short' }),
+ date.toLocaleString(locale?.code, { month: 'short' }),
...formatters,
}}
classNames={{
@@ -72,7 +77,7 @@ function Calendar({
defaultClassNames.dropdowns,
),
dropdown_root: cn(
- 'cn-calendar-dropdown-root relative rounded-(--cell-radius)',
+ 'relative rounded-(--cell-radius)',
defaultClassNames.dropdown_root,
),
dropdown: cn(
@@ -83,7 +88,7 @@ function Calendar({
'font-medium select-none',
captionLayout === 'label'
? 'text-sm'
- : 'cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+ : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
defaultClassNames.caption_label,
),
table: 'w-full border-collapse',
@@ -102,19 +107,19 @@ function Calendar({
defaultClassNames.week_number,
),
day: cn(
- 'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
+ 'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)',
props.showWeekNumber
- ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
- : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
+ ? '[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)'
+ : '[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)',
defaultClassNames.day,
),
range_start: cn(
- 'relative isolate -z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
+ 'relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted',
defaultClassNames.range_start,
),
range_middle: cn('rounded-none', defaultClassNames.range_middle),
range_end: cn(
- 'after:bg-muted-200 relative isolate -z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4',
+ 'relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted',
defaultClassNames.range_end,
),
today: cn(
@@ -146,14 +151,17 @@ function Calendar({
Chevron: ({ className, orientation, ...props }) => {
if (orientation === 'left') {
return (
-
+
);
}
if (orientation === 'right') {
return (
);
@@ -163,7 +171,9 @@ function Calendar({
);
},
- DayButton: CalendarDayButton,
+ DayButton: ({ ...props }) => (
+
+ ),
WeekNumber: ({ children, ...props }) => {
return (
|
@@ -184,8 +194,9 @@ function CalendarDayButton({
className,
day,
modifiers,
+ locale,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps & { locale?: Partial }) {
const defaultClassNames = getDefaultClassNames();
const ref = React.useRef(null);
@@ -195,10 +206,9 @@ function CalendarDayButton({
return (
|