Merge pull request #35 from handinugroho/add-startweekon-feature

Add Start Week Day options

Author: JefteCaro

pages/index.js

@@ -23,11 +23,12 @@ export default function Playground() {
     const [containerClassName, setContainerClassName] = useState("");
     const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
     const [readOnly, setReadOnly] = useState(false);
-    const [startFrom, setStartFrom] = useState("2023-01-02");
     const [minDate, setMinDate] = useState("");
     const [maxDate, setMaxDate] = useState("");
     const [disabledDates, setDisabledDates] = useState([]);
     const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
+    const [startFrom, setStartFrom] = useState("2023-03-01");
+    const [startWeekOn, setStartWeekOn] = useState("");
 
     return (
         <div className="px-4 py-8">
@@ -65,6 +66,7 @@ export default function Playground() {
                     minDate={minDate}
                     maxDate={maxDate}
                     disabledDates={disabledDates}
+                    startWeekOn={startWeekOn}
                 />
             </div>
 
@@ -227,6 +229,19 @@ export default function Playground() {
                             }}
                         />
                     </div>
+                    <div className="mb-2">
+                        <label className="block" htmlFor="startWeekOnClassName">
+                            Start Week On
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="startWeekOnClassName"
+                            value={startWeekOn}
+                            onChange={e => {
+                                setStartWeekOn(e.target.value);
+                            }}
+                        />
+                    </div>
                 </div>
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">
                     <div className="mb-2">

src/components/Calendar/Week.tsx

@@ -1,20 +1,51 @@
 import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
 import React, { useContext } from "react";
 
 import DatepickerContext from "../../contexts/DatepickerContext";
 import { loadLanguageModule, shortString, ucFirst } from "../../helpers";
 
+dayjs.extend(weekday);
+
 const Week: React.FC = () => {
-    const { i18n } = useContext(DatepickerContext);
+    const { i18n, startWeekOn } = useContext(DatepickerContext);
     loadLanguageModule(i18n);
+    let startDateModifier = dayjs().locale(i18n).weekday(0).get("day");
+    if (startWeekOn) {
+        switch (startWeekOn) {
+            case "mon":
+                startDateModifier = 1;
+                break;
+            case "tue":
+                startDateModifier = 2;
+                break;
+            case "wed":
+                startDateModifier = 3;
+                break;
+            case "thu":
+                startDateModifier = 4;
+                break;
+            case "fri":
+                startDateModifier = 5;
+                break;
+            case "sat":
+                startDateModifier = 6;
+                break;
+            case "sun":
+                startDateModifier = 0;
+                break;
+            default:
+                break;
+        }
+    }
 
     return (
         <div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
             {[0, 1, 2, 3, 4, 5, 6].map((item, index) => (
                 <div key={index} className="tracking-wide text-gray-500 text-center">
                     {ucFirst(
                         shortString(
-                            dayjs(`2022-11-${6 + item}`)
+                            dayjs(`2022-11-${6 + (item + startDateModifier)}`)
                                 .locale(i18n)
                                 .format("ddd")
                         )

src/components/Calendar/index.tsx

@@ -51,22 +51,22 @@ const Calendar: React.FC<Props> = ({
         changeDatepickerValue,
         hideDatepicker,
         asSingle,
-        i18n
+        i18n,
+        startWeekOn
     } = useContext(DatepickerContext);
     loadLanguageModule(i18n);
 
     // States
     const [showMonths, setShowMonths] = useState(false);
     const [showYears, setShowYears] = useState(false);
     const [year, setYear] = useState(date.year());
-
     // Functions
     const previous = useCallback(() => {
         return getLastDaysInMonth(
             previousMonth(date),
-            getNumberOfDay(getFirstDayInMonth(date).ddd) - 1
+            getNumberOfDay(getFirstDayInMonth(date).ddd, i18n, startWeekOn)
         );
-    }, [date]);
+    }, [date, i18n, startWeekOn]);
 
     const current = useCallback(() => {
         return getDaysInMonth(formatDate(date));

src/components/Datepicker.tsx

@@ -46,6 +46,7 @@ interface Props {
     minDate?: DateType | null;
     maxDate?: DateType | null;
     disabledDates?: DateRangeType[] | null;
+    startWeekOn?: string | null;
 }
 
 const Datepicker: React.FC<Props> = ({
@@ -68,7 +69,8 @@ const Datepicker: React.FC<Props> = ({
     readOnly = false,
     minDate = null,
     maxDate = null,
-    disabledDates = null
+    disabledDates = null,
+    startWeekOn = "sun"
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement>(null);
@@ -281,7 +283,8 @@ const Datepicker: React.FC<Props> = ({
             displayFormat,
             minDate,
             maxDate,
-            disabledDates
+            disabledDates,
+            startWeekOn
         };
     }, [
         asSingle,
@@ -305,7 +308,8 @@ const Datepicker: React.FC<Props> = ({
         firstGotoDate,
         minDate,
         maxDate,
-        disabledDates
+        disabledDates,
+        startWeekOn
     ]);
 
     return (

src/contexts/DatepickerContext.ts

@@ -27,6 +27,7 @@ interface DatepickerStore {
     inputClassName?: string | null;
     containerClassName?: string | null;
     readOnly?: boolean;
+    startWeekOn?: string | null;
     displayFormat?: string;
     minDate?: DateType | null;
     maxDate?: DateType | null;
@@ -62,7 +63,8 @@ const DatepickerContext = createContext<DatepickerStore>({
     displayFormat: "YYYY-MM-DD",
     minDate: null,
     maxDate: null,
-    disabledDates: null
+    disabledDates: null,
+    startWeekOn: "sun"
 });
 
 export default DatepickerContext;

src/helpers/index.ts

@@ -1,9 +1,7 @@
 import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
 
-export function classNames(...classes: (false | null | undefined | string)[]) {
-    return classes.filter(Boolean).join(" ");
-}
-
+dayjs.extend(weekday);
 export function getTextColorByPrimaryColor(color: string) {
     switch (color) {
         case "blue":
@@ -127,12 +125,43 @@ export function getLastElementsInArray(array: number[] = [], size = 0) {
     return result.reverse();
 }
 
-export function getNumberOfDay(dayString: string): number {
+export function getNumberOfDay(dayString: string, i18n: string, startWeekOn?: string): number {
     let number = 0;
+
+    let startDateModifier = 7 - dayjs().locale(i18n).weekday(0).get("day");
+
+    if (startWeekOn) {
+        switch (startWeekOn) {
+            case "mon":
+                startDateModifier = 6;
+                break;
+            case "tue":
+                startDateModifier = 5;
+                break;
+            case "wed":
+                startDateModifier = 4;
+                break;
+            case "thu":
+                startDateModifier = 3;
+                break;
+            case "fri":
+                startDateModifier = 2;
+                break;
+            case "sat":
+                startDateModifier = 1;
+                break;
+            case "sun":
+                startDateModifier = 0;
+                break;
+            default:
+                break;
+        }
+    }
+
     ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].forEach(
         (item, index) => {
             if (item.includes(dayString)) {
-                number = index + 1;
+                number = (index + startDateModifier) % 7;
             }
         }
     );