Adds ability to justify calendar

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} />

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]" : ""
+            }`}
         />
     );
 });

src/types/index.ts

@@ -74,4 +74,5 @@ export interface DatepickerType {
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
     popoverDirection?: PopoverDirectionType;
+    justifyCalendar?: "start" | "end" | "center";
 }