From a42d8a21cc03913e3a37679872a7d9cf68bd52a4 Mon Sep 17 00:00:00 2001
From: ethandaniel <ethan072498@gmail.com>
Date: Mon, 8 May 2023 14:59:11 -0400
Subject: [PATCH] Adds ability to justify calendar

---
 src/components/Datepicker.tsx | 7 +++++--
 src/components/utils.tsx      | 6 +++++-
 src/types/index.ts            | 1 +
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index e4bef65..581c0bd 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -40,7 +40,8 @@ const Datepicker: React.FC<DatepickerType> = ({
     inputName,
     startWeekOn = "sun",
     classNames = undefined,
-    popoverDirection = undefined
+    popoverDirection = undefined,
+    justifyCalendar = "start"
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -318,7 +319,9 @@ const Datepicker: React.FC<DatepickerType> = ({
                 <Input setContextRef={setInputRef} />
 
                 <div
-                    className="transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden"
+                    className={`transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden flex inset-x-0 ${
+                        justifyCalendar === "start" ? "justify-start" : justifyCalendar === "end" ?  "justify-end" : "justify-center"
+                    }`}
                     ref={calendarContainerRef}
                 >
                     <Arrow ref={arrowRef} />
diff --git a/src/components/utils.tsx b/src/components/utils.tsx
index 387457c..cc3e389 100644
--- a/src/components/utils.tsx
+++ b/src/components/utils.tsx
@@ -119,10 +119,14 @@ export const DoubleChevronRightIcon: React.FC<IconProps> = ({ className = "w-6 h
 
 // eslint-disable-next-line react/display-name,@typescript-eslint/ban-types
 export const Arrow = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
+    const {justifyCalendar} = props;
+    
     return (
         <div
             ref={ref}
-            className="absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-gray-300 bg-white dark:bg-slate-800 dark:border-slate-600"
+            className={`absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-gray-300 bg-white dark:bg-slate-800 dark:border-slate-600 ${
+                justifyCalendar === "start" ? "ml-[1.2rem]" : justifyCalendar === "end" ? "mr-[1.2rem]" : ""
+            }`}
         />
     );
 });
diff --git a/src/types/index.ts b/src/types/index.ts
index 3621827..0f98086 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -74,4 +74,5 @@ export interface DatepickerType {
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
     popoverDirection?: PopoverDirectionType;
+    justifyCalendar?: "start" | "end" | "center";
 }