add: send custom caption to calendar component

Author: MussiDev

components/ui/calendar.tsx

@@ -2,7 +2,13 @@
 
 import * as React from "react";
 
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { CaptionProps, DayPicker, useNavigation } from "react-day-picker";
+import {
+	ChevronLeft,
+	ChevronLeftIcon,
+	ChevronRight,
+	ChevronRightIcon,
+} from "lucide-react";
 import {
 	Select,
 	SelectContent,
@@ -11,16 +17,34 @@ import {
 	SelectValue,
 } from "./select";
 import { enUS, es } from "date-fns/locale";
+import { format, formatDate } from "date-fns";
 
-import { DayPicker } from "react-day-picker";
 import { buttonVariants } from "./button";
 import { capitalizeFirstDateLetter } from "@/utils/date";
 import { cn } from "@/lib/utils";
-import { format } from "date-fns";
 import { useLocale } from "next-intl";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
+function CustomCaptionComponent(props: CaptionProps) {
+	const { goToMonth, nextMonth, previousMonth } = useNavigation();
+	return (
+		<div className='flex items-center justify-between '>
+			<button
+				disabled={!previousMonth}
+				onClick={() => previousMonth && goToMonth(previousMonth)}
+			>
+				<ChevronLeft />
+			</button>
+			<h2 className='text-lg'>{formatDate(props.displayMonth, "MMM yyy")} </h2>
+			<button
+				disabled={!nextMonth}
+				onClick={() => nextMonth && goToMonth(nextMonth)}
+			>
+				<ChevronRight />
+			</button>
+		</div>
+	);
+}
 function Calendar({
 	className,
 	classNames,
@@ -101,6 +125,7 @@ function Calendar({
 				...classNames,
 			}}
 			components={{
+				Caption: CustomCaptionComponent,
 				IconLeft: ({ ...props }) => <ChevronLeftIcon className='h-4 w-4' />,
 				IconRight: ({ ...props }) => <ChevronRightIcon className='h-4 w-4' />,
 				Dropdown: ({ ...props }) => (

components/ui/themed-calendar.tsx

@@ -1,34 +1,10 @@
 "use client";
 
-import { CaptionProps, useNavigation } from "react-day-picker";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
 import { Calendar as CalendarComponent } from "@/components/ui/calendar";
 import { buttonVariants } from "./button";
 import { cn } from "@/lib/utils";
-import { formatDate } from "date-fns";
 import { useSettingsContext } from "@/contexts/SettingsContext";
 
-function CustomCaptionComponent(props: CaptionProps) {
-	const { goToMonth, nextMonth, previousMonth } = useNavigation();
-	return (
-		<div className='flex items-center justify-between '>
-			<button
-				disabled={!previousMonth}
-				onClick={() => previousMonth && goToMonth(previousMonth)}
-			>
-				<ChevronLeft />
-			</button>
-			<h2 className='text-lg'>{formatDate(props.displayMonth, "MMM yyy")} </h2>
-			<button
-				disabled={!nextMonth}
-				onClick={() => nextMonth && goToMonth(nextMonth)}
-			>
-				<ChevronRight />
-			</button>
-		</div>
-	);
-}
 export function ThemedCalendar(
 	props: React.ComponentProps<typeof CalendarComponent>
 ) {
@@ -58,9 +34,6 @@ export function ThemedCalendar(
 				today: "text-green-500",
 				selected: "bg-green-500 text-white hover:bg-green-500 hover:text-white",
 			}}
-			components={{
-				Caption: CustomCaptionComponent,
-			}}
 		/>
 	);
 }