From f528fb7dfc9531a68cc4f124d49715cba43d5943 Mon Sep 17 00:00:00 2001
From: Semanual <semanual@protonmail.com>
Date: Thu, 25 Apr 2024 18:25:59 -0300
Subject: [PATCH] Added class override for most parts of calendar

---
 pages/index.js                    | 245 +++++++++++++++++++++++++++---
 src/components/Calendar/Days.tsx  | 141 +++++++++++++----
 src/components/Calendar/index.tsx |  13 +-
 src/components/Datepicker.tsx     |  56 ++++++-
 src/components/Input.tsx          |  14 +-
 src/components/utils.tsx          |  61 ++++++--
 src/contexts/DatepickerContext.ts |  38 ++++-
 src/helpers/index.ts              |  13 ++
 src/types/index.ts                |  21 ++-
 9 files changed, 509 insertions(+), 93 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 5ce6034e..2b90650d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -21,7 +21,21 @@ export default function Playground() {
     const [disabled, setDisabled] = useState(false);
     const [inputClassName, setInputClassName] = useState("");
     const [containerClassName, setContainerClassName] = useState("");
+    const [calendarContainerClassName, setCalendarContainerClassName] = useState("");
     const [toggleClassName, setToggleClassName] = useState("");
+    const [baseDayClassName, setBaseDayClassName] = useState("");
+    const [disabledClassName, setDisabledClassName] = useState("");
+    const [todayClassName, setTodayClassName] = useState("");
+    const [selectedClassName, setSelectedClassName] = useState("");
+    const [selectedStartClassName, setSelectedStartClassName] = useState("");
+    const [selectedFullClassName, setSelectedFullClassName] = useState("");
+    const [selectedEndClassName, setSelectedEndClassName] = useState("");
+    const [rangeClassName, setRangeClassName] = useState("");
+    const [btnClassName, setBtnClassName] = useState("");
+    const [btnActiveClassName, setBtnActiveClassName] = useState("");
+    const [btnDisabledClassName, setBtnDisabledClassName] = useState("");
+    const [btnFullRoundClassName, setBtnFullRoundClassName] = useState("");
+    const [btnContainerClassName, setBtnContainerClassName] = useState("");
     const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
     const [readOnly, setReadOnly] = useState(false);
     const [minDate, setMinDate] = useState("");
@@ -48,6 +62,7 @@ export default function Playground() {
                 </pre>
                 <span className="text-gray-700">PlayGround</span>
             </h1>
+            <div className="hidden rounded-l-lg rounded-r-lg text-green-100 m-2 bg-green-500/10 bg-green-500/20 bg-green-500/30 bg-green-500/40 bg-green-500/50 bg-green-500/60 bg-green-500/70 bg-green-500/80 bg-green-500/90 bg-green-500 hover:bg-green-500/50 hover:bg-green-500/10 hover:border-green-500 hover:border"></div>
 
             <div className="max-w-md mx-auto my-4">
                 <Datepicker
@@ -102,6 +117,20 @@ export default function Playground() {
                     inputClassName={inputClassName}
                     containerClassName={containerClassName}
                     toggleClassName={toggleClassName}
+                    calendarContainerClassName={calendarContainerClassName}
+                    baseDayClassName={baseDayClassName}
+                    disabledClassName={disabledClassName}
+                    selectedClassName={selectedClassName}
+                    selectedStartClassName={selectedStartClassName}
+                    selectedFullClassName={selectedFullClassName}
+                    selectedEndClassName={selectedEndClassName}
+                    rangeClassName={rangeClassName}
+                    btnClassName={btnClassName}
+                    btnActiveClassName={btnActiveClassName}
+                    btnDisabledClassName={btnDisabledClassName}
+                    btnFullRoundClassName={btnFullRoundClassName}
+                    btnContainerClassName={btnContainerClassName}
+                    todayClassName={todayClassName}
                     displayFormat={displayFormat}
                     readOnly={readOnly}
                     minDate={minDate}
@@ -216,8 +245,8 @@ export default function Playground() {
                         </div>
                     </div>
                 </div>
-                <div className="w-full sm:w-1/3 pr-2 flex flex-col">
-                    <div className="mb-2">
+                <div className="w-full sm:w-2/3 flex flex-col sm:grid sm:grid-cols-2 gap-2 mb-2">
+                    <div>
                         <label className="block" htmlFor="primaryColor">
                             Primary Color
                         </label>
@@ -236,7 +265,7 @@ export default function Playground() {
                             ))}
                         </select>
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="placeholder">
                             Placeholder
                         </label>
@@ -249,7 +278,7 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="separator">
                             Separator
                         </label>
@@ -262,7 +291,7 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="startFrom">
                             Start From
                         </label>
@@ -275,7 +304,7 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="minDate">
                             Minimum Date
                         </label>
@@ -288,7 +317,7 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="maxDate">
                             Maximum Date
                         </label>
@@ -301,7 +330,7 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="dateLooking">
                             Date Looking
                         </label>
@@ -320,9 +349,7 @@ export default function Playground() {
                             ))}
                         </select>
                     </div>
-                </div>
-                <div className="w-full sm:w-1/3 pr-2 flex flex-col">
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="i18n">
                             i18n
                         </label>
@@ -335,7 +362,7 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="displayFormat">
                             Display Format
                         </label>
@@ -348,7 +375,7 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="inputClassName">
                             Input Class
                         </label>
@@ -361,7 +388,7 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
                         <label className="block" htmlFor="containerClassName">
                             Container Class
                         </label>
@@ -374,8 +401,8 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
-                        <label className="block" htmlFor="containerClassName">
+                    <div>
+                        <label className="block" htmlFor="toggleClassName">
                             Toggle Class
                         </label>
                         <input
@@ -387,7 +414,189 @@ export default function Playground() {
                             }}
                         />
                     </div>
-                    <div className="mb-2">
+                    <div>
+                        <label className="block" htmlFor="calendarContainerClassName">
+                            Calendar Container Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="calendarContainerClassName"
+                            value={calendarContainerClassName}
+                            onChange={e => {
+                                setCalendarContainerClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="baseDayClassName">
+                            Base Day Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="baseDayClassName"
+                            value={baseDayClassName}
+                            onChange={e => {
+                                setBaseDayClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="disabledClassName">
+                            Disabled Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="disabledClassName"
+                            value={disabledClassName}
+                            onChange={e => {
+                                setDisabledClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="todayClassName">
+                            Today Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="todayClassName"
+                            value={todayClassName}
+                            onChange={e => {
+                                setTodayClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="selectedClassName">
+                            Selected Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="selectedClassName"
+                            value={selectedClassName}
+                            onChange={e => {
+                                setSelectedClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="selectedStartClassName">
+                            Selected Start Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="selectedStartClassName"
+                            value={selectedStartClassName}
+                            onChange={e => {
+                                setSelectedStartClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="selectedFullClassName">
+                            Selected Full Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="selectedFullClassName"
+                            value={selectedFullClassName}
+                            onChange={e => {
+                                setSelectedFullClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="selectedEndClassName">
+                            Selected End Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="selectedEndClassName"
+                            value={selectedEndClassName}
+                            onChange={e => {
+                                setSelectedEndClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="rangeClassName">
+                            Range Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="rangeClassName"
+                            value={rangeClassName}
+                            onChange={e => {
+                                setRangeClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="btnClassName">
+                            Button Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="btnClassName"
+                            value={btnClassName}
+                            onChange={e => {
+                                setBtnClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="btnActiveClassName">
+                            Button Active Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="btnActiveClassName"
+                            value={btnActiveClassName}
+                            onChange={e => {
+                                setBtnActiveClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="btnDisabledClassName">
+                            Button Disabled Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="btnDisabledClassName"
+                            value={btnDisabledClassName}
+                            onChange={e => {
+                                setBtnDisabledClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="btnFullRoundClassName">
+                            Button Full Round Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="btnFullRoundClassName"
+                            value={btnFullRoundClassName}
+                            onChange={e => {
+                                setBtnFullRoundClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <label className="block" htmlFor="btnContainerClassName">
+                            Button Container Class
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="btnContainerClassName"
+                            value={btnContainerClassName}
+                            onChange={e => {
+                                setBtnContainerClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div>
                         <label className="block" htmlFor="startWeekOnClassName">
                             Start Week On
                         </label>
@@ -424,7 +633,7 @@ export default function Playground() {
                                 }}
                             />
                         </div>
-                        <div className="mb-2">
+                        <div>
                             <label className="block" htmlFor="endDate">
                                 End Date
                             </label>
diff --git a/src/components/Calendar/Days.tsx b/src/components/Calendar/Days.tsx
index 43f0b9b6..4a3f296f 100644
--- a/src/components/Calendar/Days.tsx
+++ b/src/components/Calendar/Days.tsx
@@ -1,10 +1,16 @@
 import dayjs from "dayjs";
 import isBetween from "dayjs/plugin/isBetween";
-import React, { useCallback, useContext } from "react";
+import React, { useCallback, useContext, useMemo } from "react";
 
 import { BG_COLOR, TEXT_COLOR } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
-import { formatDate, nextMonth, previousMonth, classNames as cn } from "../../helpers";
+import {
+    formatDate,
+    nextMonth,
+    previousMonth,
+    classNames as cn,
+    classNameOverloader
+} from "../../helpers";
 import { Period } from "../../types";
 
 dayjs.extend(isBetween);
@@ -38,20 +44,69 @@ const Days: React.FC<Props> = ({
         changeDayHover,
         minDate,
         maxDate,
-        disabledDates
+        disabledDates,
+        baseDayClassName,
+        disabledClassName,
+        selectedClassName,
+        selectedStartClassName,
+        selectedFullClassName,
+        selectedEndClassName,
+        rangeClassName,
+        todayClassName
     } = useContext(DatepickerContext);
 
+    const baseDayClassNameOverload = useMemo(() => {
+        const defaultBaseDayClassName =
+            "flex items-center justify-center w-12 h-12 md:w-10 md:h-10";
+        return classNameOverloader(defaultBaseDayClassName, baseDayClassName);
+    }, [baseDayClassName]);
+
+    const rangeClassNameOverload = useMemo(() => {
+        const defaultRangeClassName = `${BG_COLOR["100"][primaryColor]} dark:bg-white/10`;
+        return classNameOverloader(defaultRangeClassName, rangeClassName);
+    }, [rangeClassName, primaryColor]);
+
+    const selectedClassNameOverload = useMemo(() => {
+        const defaultSelectedClassName = `text-white font-medium ${BG_COLOR["500"][primaryColor]}`;
+        return classNameOverloader(defaultSelectedClassName, selectedClassName);
+    }, [selectedClassName, primaryColor]);
+
+    const selectedStartClassNameOverload = useMemo(() => {
+        const defaultSelectedStartClassName = "rounded-l-full";
+        return classNameOverloader(defaultSelectedStartClassName, selectedStartClassName);
+    }, [selectedStartClassName]);
+
+    const selectedFullClassNameOverload = useMemo(() => {
+        const defaultSelectedFullClassName = "rounded-full";
+        return classNameOverloader(defaultSelectedFullClassName, selectedFullClassName);
+    }, [selectedFullClassName]);
+
+    const selectedEndClassNameOverload = useMemo(() => {
+        const defaultSelectedEndClassName = "rounded-r-full";
+        return classNameOverloader(defaultSelectedEndClassName, selectedEndClassName);
+    }, [selectedEndClassName]);
+
+    const disabledClassNameOverload = useMemo(() => {
+        const defaultDisabledClassName = "line-through";
+        return classNameOverloader(defaultDisabledClassName, disabledClassName);
+    }, [disabledClassName]);
+
+    const todayClassNameOverload = useMemo(() => {
+        const defaultTodayClassName =
+            TEXT_COLOR["500"][primaryColor as keyof (typeof TEXT_COLOR)["500"]];
+        return classNameOverloader(defaultTodayClassName, todayClassName);
+    }, [todayClassName, primaryColor]);
+
     // Functions
     const currentDateClass = useCallback(
         (item: number) => {
             const itemDate = `${calendarData.date.year()}-${calendarData.date.month() + 1}-${
                 item >= 10 ? item : "0" + item
             }`;
-            if (formatDate(dayjs()) === formatDate(dayjs(itemDate)))
-                return TEXT_COLOR["500"][primaryColor as keyof (typeof TEXT_COLOR)["500"]];
+            if (formatDate(dayjs()) === formatDate(dayjs(itemDate))) return todayClassNameOverload;
             return "";
         },
-        [calendarData.date, primaryColor]
+        [calendarData.date, todayClassNameOverload]
     );
 
     const activeDateData = useCallback(
@@ -60,18 +115,18 @@ const Days: React.FC<Props> = ({
             let className = "";
 
             if (dayjs(fullDay).isSame(period.start) && dayjs(fullDay).isSame(period.end)) {
-                className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium rounded-full`;
+                className = ` ${selectedClassNameOverload} ${selectedFullClassNameOverload}`;
             } else if (dayjs(fullDay).isSame(period.start)) {
-                className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${
+                className = ` ${selectedClassNameOverload} ${
                     dayjs(fullDay).isSame(dayHover) && !period.end
-                        ? "rounded-full"
-                        : "rounded-l-full"
+                        ? selectedFullClassNameOverload
+                        : selectedStartClassNameOverload
                 }`;
             } else if (dayjs(fullDay).isSame(period.end)) {
-                className = ` ${BG_COLOR["500"][primaryColor]} text-white font-medium ${
+                className = ` ${selectedClassNameOverload} ${
                     dayjs(fullDay).isSame(dayHover) && !period.start
-                        ? "rounded-full"
-                        : "rounded-r-full"
+                        ? selectedFullClassNameOverload
+                        : selectedEndClassNameOverload
                 }`;
             }
 
@@ -80,7 +135,16 @@ const Days: React.FC<Props> = ({
                 className: className
             };
         },
-        [calendarData.date, dayHover, period.end, period.start, primaryColor]
+        [
+            calendarData.date,
+            dayHover,
+            period.end,
+            period.start,
+            selectedClassNameOverload,
+            selectedEndClassNameOverload,
+            selectedFullClassNameOverload,
+            selectedStartClassNameOverload
+        ]
     );
 
     const hoverClassByDay = useCallback(
@@ -92,9 +156,7 @@ const Days: React.FC<Props> = ({
 
             if (period.start && period.end) {
                 if (dayjs(fullDay).isBetween(period.start, period.end, "day", "[)")) {
-                    return ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
-                        day
-                    )} dark:bg-white/10`;
+                    return ` ${rangeClassNameOverload} ${currentDateClass(day)}`;
                 }
             }
 
@@ -103,27 +165,33 @@ const Days: React.FC<Props> = ({
             }
 
             if (period.start && dayjs(fullDay).isBetween(period.start, dayHover, "day", "[)")) {
-                className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
-                    day
-                )} dark:bg-white/10`;
+                className = ` ${rangeClassNameOverload} ${currentDateClass(day)}`;
             }
 
             if (period.end && dayjs(fullDay).isBetween(dayHover, period.end, "day", "[)")) {
-                className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
-                    day
-                )} dark:bg-white/10`;
+                className = ` ${rangeClassNameOverload} ${currentDateClass(day)}`;
             }
 
             if (dayHover === fullDay) {
-                const bgColor = BG_COLOR["500"][primaryColor];
-                className = ` transition-all duration-500 text-white font-medium ${bgColor} ${
-                    period.start ? "rounded-r-full" : "rounded-l-full"
+                console.log(period.start);
+                className = ` ${selectedClassNameOverload} transition-all duration-500 ${
+                    period.start ? selectedEndClassNameOverload : selectedStartClassNameOverload
                 }`;
             }
 
             return className;
         },
-        [calendarData.date, currentDateClass, dayHover, period.end, period.start, primaryColor]
+        [
+            calendarData.date,
+            currentDateClass,
+            dayHover,
+            period.end,
+            period.start,
+            rangeClassNameOverload,
+            selectedClassNameOverload,
+            selectedStartClassNameOverload,
+            selectedEndClassNameOverload
+        ]
     );
 
     const isDateTooEarly = useCallback(
@@ -205,19 +273,28 @@ const Days: React.FC<Props> = ({
 
     const buttonClass = useCallback(
         (day: number, type: "current" | "next" | "previous") => {
-            const baseClass = "flex items-center justify-center w-12 h-12 lg:w-10 lg:h-10";
             if (type === "current") {
                 return cn(
-                    baseClass,
+                    baseDayClassNameOverload,
                     !activeDateData(day).active
                         ? hoverClassByDay(day)
                         : activeDateData(day).className,
-                    isDateDisabled(day, type) && "line-through"
+                    isDateDisabled(day, type) && disabledClassNameOverload
                 );
             }
-            return cn(baseClass, isDateDisabled(day, type) && "line-through", "text-gray-400");
+            return cn(
+                baseDayClassNameOverload,
+                isDateDisabled(day, type) && disabledClassNameOverload,
+                "text-gray-400"
+            );
         },
-        [activeDateData, hoverClassByDay, isDateDisabled]
+        [
+            activeDateData,
+            hoverClassByDay,
+            isDateDisabled,
+            disabledClassNameOverload,
+            baseDayClassNameOverload
+        ]
     );
 
     const checkIfHoverPeriodContainsDisabledPeriod = useCallback(
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
index 4a374375..aa12d0ba 100644
--- a/src/components/Calendar/index.tsx
+++ b/src/components/Calendar/index.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from "re
 import { CALENDAR_SIZE, DATE_FORMAT } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
 import {
+    classNameOverloader,
     formatDate,
     getDaysInMonth,
     getFirstDayInMonth,
@@ -59,7 +60,8 @@ const Calendar: React.FC<Props> = ({
         asSingle,
         i18n,
         startWeekOn,
-        input
+        input,
+        btnContainerClassName
     } = useContext(DatepickerContext);
     loadLanguageModule(i18n);
 
@@ -241,9 +243,16 @@ const Calendar: React.FC<Props> = ({
         [maxDate]
     );
 
+    const btnContainerClassNameOverride = useMemo(() => {
+        const defaultBtnContainerClassName =
+            "flex items-center space-x-1.5 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5";
+        console.log(btnContainerClassName);
+        return classNameOverloader(defaultBtnContainerClassName, btnContainerClassName);
+    }, [btnContainerClassName]);
+
     return (
         <div className="w-full md:w-[296px] md:min-w-[296px]">
-            <div className="flex items-center space-x-1.5 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5">
+            <div className={btnContainerClassNameOverride}>
                 {!showMonths && !showYears && (
                     <div className="flex-none">
                         <RoundedButton roundedFull={true} onClick={onClickPrevious}>
diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 54e90b78..22028056 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -7,7 +7,7 @@ import Input from "../components/Input";
 import Shortcuts from "../components/Shortcuts";
 import { COLORS, DATE_FORMAT, DEFAULT_COLOR, LANGUAGE } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { formatDate, nextMonth, previousMonth } from "../helpers";
+import { classNameOverloader, formatDate, nextMonth, previousMonth } from "../helpers";
 import useOnClickOutside from "../hooks";
 import { Period, DatepickerType, ColorKeys } from "../types";
 
@@ -30,6 +30,20 @@ const Datepicker: React.FC<DatepickerType> = ({
     inputClassName = null,
     containerClassName = null,
     toggleClassName = null,
+    baseDayClassName = null,
+    calendarContainerClassName = null,
+    disabledClassName = null,
+    todayClassName = null,
+    selectedClassName = null,
+    selectedStartClassName = null,
+    selectedFullClassName = null,
+    selectedEndClassName = null,
+    rangeClassName = null,
+    btnClassName = null,
+    btnActiveClassName = null,
+    btnDisabledClassName = null,
+    btnFullRoundClassName = null,
+    btnContainerClassName = null,
     toggleIcon = undefined,
     displayFormat = DATE_FORMAT,
     readOnly = false,
@@ -269,6 +283,19 @@ const Datepicker: React.FC<DatepickerType> = ({
             inputClassName,
             containerClassName,
             toggleClassName,
+            baseDayClassName,
+            disabledClassName,
+            selectedStartClassName,
+            selectedFullClassName,
+            selectedEndClassName,
+            selectedClassName,
+            rangeClassName,
+            btnClassName,
+            btnActiveClassName,
+            btnDisabledClassName,
+            btnFullRoundClassName,
+            btnContainerClassName,
+            todayClassName,
             toggleIcon,
             readOnly,
             displayFormat,
@@ -302,6 +329,19 @@ const Datepicker: React.FC<DatepickerType> = ({
         inputClassName,
         containerClassName,
         toggleClassName,
+        baseDayClassName,
+        disabledClassName,
+        selectedStartClassName,
+        selectedFullClassName,
+        selectedEndClassName,
+        selectedClassName,
+        rangeClassName,
+        btnClassName,
+        btnActiveClassName,
+        btnDisabledClassName,
+        btnFullRoundClassName,
+        btnContainerClassName,
+        todayClassName,
         toggleIcon,
         readOnly,
         displayFormat,
@@ -320,13 +360,15 @@ const Datepicker: React.FC<DatepickerType> = ({
 
     const containerClassNameOverload = useMemo(() => {
         const defaultContainerClassName = "relative w-full text-gray-700";
-        return typeof containerClassName === "function"
-            ? containerClassName(defaultContainerClassName)
-            : typeof containerClassName === "string" && containerClassName !== ""
-            ? containerClassName
-            : defaultContainerClassName;
+        return classNameOverloader(defaultContainerClassName, containerClassName);
     }, [containerClassName]);
 
+    const calendarContainerClassNameOverload = useMemo(() => {
+        const defaultCalendarContainerClassName =
+            "mt-2.5 shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg";
+        return classNameOverloader(defaultCalendarContainerClassName, calendarContainerClassName);
+    }, [calendarContainerClassName]);
+
     return (
         <DatepickerContext.Provider value={contextValues}>
             <div className={containerClassNameOverload} ref={containerRef}>
@@ -338,7 +380,7 @@ const Datepicker: React.FC<DatepickerType> = ({
                 >
                     <Arrow ref={arrowRef} />
 
-                    <div className="mt-2.5 shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg">
+                    <div className={calendarContainerClassNameOverload}>
                         <div className="flex flex-col lg:flex-row py-2">
                             {showShortcuts && <Shortcuts />}
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 38fc856e..5ef393c0 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect, useRef } from "react";
 
 import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { dateIsValid, parseFormattedDate } from "../helpers";
+import { classNameOverloader, dateIsValid, parseFormattedDate } from "../helpers";
 
 import ToggleButton from "./ToggleButton";
 
@@ -57,11 +57,7 @@ const Input: React.FC<Props> = (e: Props) => {
 
         const defaultInputClassName = `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}`;
 
-        return typeof inputClassName === "function"
-            ? inputClassName(defaultInputClassName)
-            : typeof inputClassName === "string" && inputClassName !== ""
-            ? inputClassName
-            : defaultInputClassName;
+        return classNameOverloader(defaultInputClassName, inputClassName);
     }, [inputRef, classNames, primaryColor, inputClassName]);
 
     const handleInputChange = useCallback(
@@ -155,11 +151,7 @@ const Input: React.FC<Props> = (e: Props) => {
         const defaultToggleClassName =
             "absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed";
 
-        return typeof toggleClassName === "function"
-            ? toggleClassName(defaultToggleClassName)
-            : typeof toggleClassName === "string" && toggleClassName !== ""
-            ? toggleClassName
-            : defaultToggleClassName;
+        return classNameOverloader(defaultToggleClassName, toggleClassName);
     }, [toggleClassName, buttonRef, classNames]);
 
     // UseEffects && UseLayoutEffect
diff --git a/src/components/utils.tsx b/src/components/utils.tsx
index 6bdb31a7..49d61f9d 100644
--- a/src/components/utils.tsx
+++ b/src/components/utils.tsx
@@ -1,8 +1,10 @@
-import React, { useCallback, useContext } from "react";
+import React, { useCallback, useContext, useMemo } from "react";
 
 import { BG_COLOR, BORDER_COLOR, BUTTON_COLOR, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
 
+import { classNameOverloader } from "helpers";
+
 interface IconProps {
     className: string;
 }
@@ -176,24 +178,53 @@ export const RoundedButton: React.FC<Button> = ({
     active = false
 }) => {
     // Contexts
-    const { primaryColor } = useContext(DatepickerContext);
-
-    // Functions
-    const getClassName = useCallback(() => {
+    const {
+        primaryColor,
+        btnClassName,
+        btnActiveClassName,
+        btnDisabledClassName,
+        btnFullRoundClassName
+    } = useContext(DatepickerContext);
+
+    const btnClassNameOverload = useMemo(() => {
         const darkClass = "dark:text-white/70 dark:hover:bg-white/10 dark:focus:bg-white/10";
-        const activeClass = active ? "font-semibold bg-gray-50 dark:bg-white/5" : "";
-        const defaultClass = !roundedFull
-            ? `w-full tracking-wide ${darkClass} ${activeClass} transition-all duration-300 px-3 ${padding} uppercase hover:bg-gray-100 rounded-md focus:ring-1`
-            : `${darkClass} ${activeClass} transition-all duration-300 hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1`;
-        const buttonFocusColor =
-            BUTTON_COLOR.focus[primaryColor as keyof typeof BUTTON_COLOR.focus];
-        const disabledClass = disabled ? "line-through" : "";
+        const notRoundedClass = `w-full tracking-wide px-3 ${padding} uppercase hover:bg-gray-100 rounded-md focus:ring-1`;
+        const focusColor = BUTTON_COLOR.focus[primaryColor as keyof typeof BUTTON_COLOR.focus];
+        const defaultBtnClassName = `${darkClass} ${focusColor} ${notRoundedClass}`;
+        return classNameOverloader(defaultBtnClassName, btnClassName);
+    }, [btnClassName, padding, primaryColor]);
 
-        return `${defaultClass} ${buttonFocusColor} ${disabledClass}`;
-    }, [disabled, padding, primaryColor, roundedFull, active]);
+    const btnFullRoundClassNameOverload = useMemo(() => {
+        const darkClass = "dark:text-white/70 dark:hover:bg-white/10 dark:focus:bg-white/10";
+        const roundedClass = "hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1";
+        const focusColor = BUTTON_COLOR.focus[primaryColor as keyof typeof BUTTON_COLOR.focus];
+        const defaultBtnClassName = `${darkClass} ${focusColor} ${roundedClass}`;
+        return classNameOverloader(defaultBtnClassName, btnFullRoundClassName);
+    }, [btnFullRoundClassName, primaryColor]);
+
+    const btnActiveClassNameOverload = useMemo(() => {
+        const defaultActiveName = "font-semibold bg-gray-50 dark:bg-white/5";
+        return active ? classNameOverloader(defaultActiveName, btnActiveClassName) : "";
+    }, [btnActiveClassName, active]);
+
+    const btnDisabledClassNameOverload = useMemo(() => {
+        const defaultDisabledName = "line-through";
+        return disabled ? classNameOverloader(defaultDisabledName, btnDisabledClassName) : "";
+    }, [btnDisabledClassName, disabled]);
+
+    const getClassName = useMemo(() => {
+        const defaultClass = roundedFull ? btnFullRoundClassNameOverload : btnClassNameOverload;
+        return `transition-all duration-300 ${defaultClass} ${btnActiveClassNameOverload} ${btnDisabledClassNameOverload}`;
+    }, [
+        btnDisabledClassNameOverload,
+        btnClassNameOverload,
+        btnActiveClassNameOverload,
+        roundedFull,
+        btnFullRoundClassNameOverload
+    ]);
 
     return (
-        <button type="button" className={getClassName()} onClick={onClick} disabled={disabled}>
+        <button type="button" className={getClassName} onClick={onClick} disabled={disabled}>
             {children}
         </button>
     );
diff --git a/src/contexts/DatepickerContext.ts b/src/contexts/DatepickerContext.ts
index d42aadd8..150d6cf0 100644
--- a/src/contexts/DatepickerContext.ts
+++ b/src/contexts/DatepickerContext.ts
@@ -10,7 +10,8 @@ import {
     DateRangeType,
     ClassNamesTypeProp,
     PopoverDirectionType,
-    ColorKeys
+    ColorKeys,
+    ClassName
 } from "../types";
 
 interface DatepickerStore {
@@ -35,9 +36,23 @@ interface DatepickerStore {
     i18n: string;
     value: DateValueType;
     disabled?: boolean;
-    inputClassName?: ((className: string) => string) | string | null;
-    containerClassName?: ((className: string) => string) | string | null;
-    toggleClassName?: ((className: string) => string) | string | null;
+    inputClassName?: ClassName;
+    containerClassName?: ClassName;
+    toggleClassName?: ClassName;
+    calendarContainerClassName?: ClassName;
+    baseDayClassName?: ClassName;
+    disabledClassName?: ClassName;
+    selectedStartClassName?: ClassName;
+    selectedFullClassName?: ClassName;
+    selectedEndClassName?: ClassName;
+    selectedClassName?: ClassName;
+    rangeClassName?: ClassName;
+    btnClassName?: ClassName;
+    btnActiveClassName?: ClassName;
+    btnDisabledClassName?: ClassName;
+    btnFullRoundClassName?: ClassName;
+    btnContainerClassName?: ClassName;
+    todayClassName?: ClassName;
     toggleIcon?: (open: boolean) => React.ReactNode;
     readOnly?: boolean;
     startWeekOn?: string | null;
@@ -78,8 +93,21 @@ const DatepickerContext = createContext<DatepickerStore>({
     i18n: LANGUAGE,
     disabled: false,
     inputClassName: "",
-    containerClassName: "",
     toggleClassName: "",
+    calendarContainerClassName: "",
+    baseDayClassName: "",
+    disabledClassName: "",
+    selectedStartClassName: "",
+    selectedFullClassName: "",
+    selectedEndClassName: "",
+    selectedClassName: "",
+    rangeClassName: "",
+    btnClassName: "",
+    btnActiveClassName: "",
+    btnDisabledClassName: "",
+    btnFullRoundClassName: "",
+    btnContainerClassName: "",
+    todayClassName: "",
     readOnly: false,
     displayFormat: DATE_FORMAT,
     minDate: null,
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index d59d919a..bcdafbfd 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -7,10 +7,23 @@ dayjs.extend(customParseFormat);
 
 import { DATE_FORMAT, LANGUAGE } from "../constants";
 
+import { ClassName } from "types";
+
 export function classNames(...classes: (false | null | undefined | string)[]) {
     return classes.filter(Boolean).join(" ");
 }
 
+export function classNameOverloader(
+    defaultClassName: string,
+    overloadedClassName: ClassName | undefined = null
+) {
+    return typeof overloadedClassName === "function"
+        ? overloadedClassName(defaultClassName)
+        : typeof overloadedClassName === "string" && overloadedClassName !== ""
+        ? overloadedClassName
+        : defaultClassName;
+}
+
 export function getTextColorByPrimaryColor(color: string) {
     switch (color) {
         case "blue":
diff --git a/src/types/index.ts b/src/types/index.ts
index b9e561cd..62b49f06 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -53,6 +53,7 @@ export type ClassNamesTypeProp = {
 
 export type PopoverDirectionType = "up" | "down";
 
+export type ClassName = ((className: string) => string) | string | null;
 export interface DatepickerType {
     primaryColor?: ColorKeys;
     value: DateValueType;
@@ -68,9 +69,23 @@ export interface DatepickerType {
     i18n?: string;
     disabled?: boolean;
     classNames?: ClassNamesTypeProp | undefined;
-    containerClassName?: ((className: string) => string) | string | null;
-    inputClassName?: ((className: string) => string) | string | null;
-    toggleClassName?: ((className: string) => string) | string | null;
+    containerClassName?: ClassName;
+    inputClassName?: ClassName;
+    toggleClassName?: ClassName;
+    calendarContainerClassName?: ClassName;
+    baseDayClassName?: ClassName;
+    disabledClassName?: ClassName;
+    selectedClassName?: ClassName;
+    selectedStartClassName?: ClassName;
+    selectedFullClassName?: ClassName;
+    selectedEndClassName?: ClassName;
+    rangeClassName?: ClassName;
+    btnClassName?: ClassName;
+    btnActiveClassName?: ClassName;
+    btnDisabledClassName?: ClassName;
+    btnFullRoundClassName?: ClassName;
+    btnContainerClassName?: ClassName;
+    todayClassName?: ClassName;
     toggleIcon?: (open: boolean) => React.ReactNode;
     inputId?: string;
     inputName?: string;