MaTeMaTuK · fmoosavi · Nov 11, 2023 · Dec 2, 2023 · Dec 3, 2023 · Dec 4, 2023
diff --git a/README.md b/README.md
@@ -48,6 +48,31 @@ You may handle actions
 />
 ```
 
+You can override colors to make it compatible with your theme
+
+```css
+
+.dark {
+  --gtr-back: #000;
+  --gtr-even-back: #0a0a0a;
+  --gtr-grid-row-line: #14100d;
+  --gtr-border: #191b1b;
+  --gtr-label: #aaa;
+  --gtr-calendar-bottom-text:#ccc;
+  --gtr-calendar-stroke: #1f1f1f;
+  --gtr-tooltip-default-container-paragraph: #999999;
+  --gtr-bar-handle: #222222;
+
+  --gtr-scroll-wrapper: rgba(255,255,255, 0.2);
+  --gtr-scroll-wrapper-hover: rgba(255,255,255, 0.3);
+  --gtr-tooltip-default-container-shadow-first: rgba(255,255,255, 0.16);
+  --gtr-tooltip-default-container-shadow-second: rgba(255,255,255, 0.23);
+
+  --gtr-gantt-header-separator:rgb(59, 59, 59);
+  --gtr-task-list-expander: rgb(169 169 169);
+}
+```
+
 ## How to run example
 
 ```
@@ -115,7 +140,8 @@ npm start
 | todayColor                 | string | Specifies the current period column fill color.                                                |
 | TooltipContent             |        | Specifies the Tooltip view for selected taskbar.                                               |
 | TaskListHeader             |        | Specifies the task list Header view                                                            |
-| TaskListTable              |        | Specifies the task list Table view                                                             |
+| TaskListTable              |        | Specifies the task list Table view   
+
 
 - TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56)
 - TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -9,6 +9,7 @@ const App = () => {
   const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
   const [tasks, setTasks] = React.useState<Task[]>(initTasks());
   const [isChecked, setIsChecked] = React.useState(true);
+  const [isDark, setDark] = React.useState(true);
   let columnWidth = 65;
   if (view === ViewMode.Year) {
     columnWidth = 350;
@@ -68,41 +69,68 @@ const App = () => {
   };
 
   return (
-    <div className="Wrapper">
-      <ViewSwitcher
-        onViewModeChange={viewMode => setView(viewMode)}
-        onViewListChange={setIsChecked}
-        isChecked={isChecked}
-      />
-      <h3>Gantt With Unlimited Height</h3>
-      <Gantt
-        tasks={tasks}
-        viewMode={view}
-        onDateChange={handleTaskChange}
-        onDelete={handleTaskDelete}
-        onProgressChange={handleProgressChange}
-        onDoubleClick={handleDblClick}
-        onClick={handleClick}
-        onSelect={handleSelect}
-        onExpanderClick={handleExpanderClick}
-        listCellWidth={isChecked ? "155px" : ""}
-        columnWidth={columnWidth}
-      />
-      <h3>Gantt With Limited Height</h3>
-      <Gantt
-        tasks={tasks}
-        viewMode={view}
-        onDateChange={handleTaskChange}
-        onDelete={handleTaskDelete}
-        onProgressChange={handleProgressChange}
-        onDoubleClick={handleDblClick}
-        onClick={handleClick}
-        onSelect={handleSelect}
-        onExpanderClick={handleExpanderClick}
-        listCellWidth={isChecked ? "155px" : ""}
-        ganttHeight={300}
-        columnWidth={columnWidth}
-      />
+    <div className={isDark ? "dark" : ""}>
+      <div className="Wrapper">
+        <ViewSwitcher
+          onViewModeChange={viewMode => setView(viewMode)}
+          onViewListChange={setIsChecked}
+          isChecked={isChecked}
+          setDark={setDark}
+          isDark={isDark}
+        />
+        <h3>Gantt With Unlimited Height</h3>
+
+        <Gantt
+          tasks={tasks}
+          viewMode={view}
+          onDateChange={handleTaskChange}
+          onDelete={handleTaskDelete}
+          onProgressChange={handleProgressChange}
+          onDoubleClick={handleDblClick}
+          onClick={handleClick}
+          onSelect={handleSelect}
+          onExpanderClick={handleExpanderClick}
+          listCellWidth={isChecked ? "155px" : ""}
+          columnWidth={columnWidth}
+        />
+        <h3>Gantt With Limited Height</h3>
+        <Gantt
+          tasks={tasks}
+          viewMode={view}
+          onDateChange={handleTaskChange}
+          onDelete={handleTaskDelete}
+          onProgressChange={handleProgressChange}
+          onDoubleClick={handleDblClick}
+          onClick={handleClick}
+          onSelect={handleSelect}
+          onExpanderClick={handleExpanderClick}
+          listCellWidth={isChecked ? "155px" : ""}
+          ganttHeight={300}
+          columnWidth={columnWidth}
+        />
+        <h3>RTL Gantt</h3>
+        <Gantt
+          tasks={tasks}
+          viewMode={view}
+          onDateChange={handleTaskChange}
+          onDelete={handleTaskDelete}
+          onProgressChange={handleProgressChange}
+          onDoubleClick={handleDblClick}
+          onClick={handleClick}
+          onSelect={handleSelect}
+          onExpanderClick={handleExpanderClick}
+          listCellWidth={isChecked ? "155px" : ""}
+          columnWidth={columnWidth}
+          locale="fa"
+          headerTextAlign="center"
+          headerLabels={{
+            name: 'نام',
+            from: 'از تاریخ',
+            to: 'تا تاریخ'
+          }}
+          rtl
+        />
+      </div>
     </div>
   );
 };

diff --git a/example/src/components/view-switcher.tsx b/example/src/components/view-switcher.tsx
@@ -4,12 +4,15 @@ import { ViewMode } from "gantt-task-react";
 type ViewSwitcherProps = {
   isChecked: boolean;
   onViewListChange: (isChecked: boolean) => void;
+  isDark: boolean;
+  setDark: (isDark: boolean) => void;
   onViewModeChange: (viewMode: ViewMode) => void;
 };
 export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
   onViewModeChange,
   onViewListChange,
   isChecked,
+  isDark,setDark
 }) => {
   return (
     <div className="ViewContainer">
@@ -69,6 +72,17 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
         </label>
         Show Task List
       </div>
+      <div className="Switch">
+        <label className="Switch_Toggle">
+          <input
+            type="checkbox"
+            defaultChecked={isDark}
+            onClick={() => setDark(!isDark)}
+          />
+          <span className="Slider" />
+        </label>
+        Dark Mode
+      </div>
     </div>
   );
 };
diff --git a/example/src/index.css b/example/src/index.css
@@ -1,5 +1,39 @@
+:root {
+  --back: #fff;
+  --button-back: #e7e7e7;
+  --fore:#000;
+  --gray:#ccc;
+  --inputSlider: #2196f3;
+}
+
+.dark {
+  --back: #000;
+  --button-back: #181818;
+  --fore:#fff;
+  --gray:#333;
+  --inputSlider: #2196f3;
+  --gtr-back: #000;
+  --gtr-even-back: #0a0a0a;
+  --gtr-grid-row-line: #14100d;
+  --gtr-border: #191b1b;
+  --gtr-label: #aaa;
+  --gtr-calendar-bottom-text:#ccc;
+  --gtr-calendar-stroke: #1f1f1f;
+  --gtr-tooltip-default-container-paragraph: #999999;
+  --gtr-bar-handle: #222222;
+
+  --gtr-scroll-wrapper: rgba(255,255,255, 0.2);
+  --gtr-scroll-wrapper-hover: rgba(255,255,255, 0.3);
+  --gtr-tooltip-default-container-shadow-first: rgba(255,255,255, 0.16);
+  --gtr-tooltip-default-container-shadow-second: rgba(255,255,255, 0.23);
+
+  --gtr-gantt-header-separator:rgb(59, 59, 59);
+  --gtr-task-list-expander: rgb(169 169 169);
+}
 .Wrapper {
   margin-bottom: 2rem;
+  background-color: var(--back);
+  color: var(--fore)
 }
 .ViewContainer {
   list-style: none;
@@ -11,8 +45,8 @@
 }
 
 .Button {
-  background-color: #e7e7e7;
-  color: black;
+  background-color: var(--button-back);
+  color: var(--fore);
   border: none;
   padding: 7px 16px;
   text-decoration: none;
@@ -50,7 +84,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #ccc;
+  background-color: var(--gray);
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
@@ -62,21 +96,22 @@
   width: 21px;
   left: 6px;
   bottom: 4px;
-  background-color: white;
+  background-color: var(--back);
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 
 input:checked + .Slider {
-  background-color: #2196f3;
+  background-color: var(--inputSlider);
 }
 
 input:focus + .Slider {
-  box-shadow: 0 0 1px #2196f3;
+  box-shadow: 0 0 1px var(--inputSlider);
 }
 
 input:checked + .Slider:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
+
diff --git a/src/components/calendar/calendar.module.css b/src/components/calendar/calendar.module.css
@@ -1,6 +1,6 @@
 .calendarBottomText {
   text-anchor: middle;
-  fill: #333;
+  fill: var(--gtr-calendar-bottom-text);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -10,12 +10,12 @@
 }
 
 .calendarTopTick {
-  stroke: #e6e4e4;
+  stroke: var(--gtr-border);
 }
 
 .calendarTopText {
   text-anchor: middle;
-  fill: #555;
+  fill: var(--gtr-label);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -25,7 +25,7 @@
 }
 
 .calendarHeader {
-  fill: #ffffff;
-  stroke: #e0e0e0;
+  fill: var(--gtr-back);
+  stroke: var(--gtr-calendar-stroke);
   stroke-width: 1.4;
 }
diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
@@ -6,10 +6,10 @@ import {
   getDaysInMonth,
   getLocalDayOfWeek,
   getLocaleMonth,
-  getWeekNumberISO8601,
 } from "../../helpers/date-helper";
 import { DateSetup } from "../../types/date-setup";
 import styles from "./calendar.module.css";
+import { farsiDigitToEnglish } from "../../helpers/other-helper";
 
 export type CalendarProps = {
   dateSetup: DateSetup;
@@ -38,7 +38,7 @@ export const Calendar: React.FC<CalendarProps> = ({
     const topDefaultHeight = headerHeight * 0.5;
     for (let i = 0; i < dateSetup.dates.length; i++) {
       const date = dateSetup.dates[i];
-      const bottomValue = date.getFullYear();
+      const bottomValue = date.toLocaleDateString(locale, { year: 'numeric' });
       bottomValues.push(
         <text
           key={date.getTime()}
@@ -83,7 +83,14 @@ export const Calendar: React.FC<CalendarProps> = ({
     for (let i = 0; i < dateSetup.dates.length; i++) {
       const date = dateSetup.dates[i];
       // const bottomValue = getLocaleMonth(date, locale);
-      const quarter = "Q" + Math.floor((date.getMonth() + 3) / 3);
+      const qNumber = Math.floor((date.getMonth() + 3) / 3);
+
+      let quarter;
+      if (locale === 'fa') {
+        const seasons = ['بهار', 'تابستان', 'پاییز', 'زمستان'];
+        quarter = seasons[qNumber - 1];
+      } else
+        quarter = 'Q' + qNumber;
       bottomValues.push(
         <text
           key={date.getTime()}
@@ -98,7 +105,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         i === 0 ||
         date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()
       ) {
-        const topValue = date.getFullYear().toString();
+        const topValue = date.toLocaleDateString(locale, { year: 'numeric' });
         let xText: number;
         if (rtl) {
           xText = (6 + i + date.getMonth() + 1) * columnWidth;
@@ -142,7 +149,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         i === 0 ||
         date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()
       ) {
-        const topValue = date.getFullYear().toString();
+        const topValue = date.toLocaleDateString(locale, { year: 'numeric' });
         let xText: number;
         if (rtl) {
           xText = (6 + i + date.getMonth() + 1) * columnWidth;
@@ -176,10 +183,12 @@ export const Calendar: React.FC<CalendarProps> = ({
       let topValue = "";
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
         // top
-        topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
+        topValue = `${getLocaleMonth(date, locale)}, ${date.toLocaleDateString(locale, { year: 'numeric' })}`;
       }
+      const weekNumber = Math.floor(farsiDigitToEnglish(date.toLocaleDateString(locale, { day: 'numeric' })) / 7) + 1;
+
       // bottom
-      const bottomValue = `W${getWeekNumberISO8601(date)}`;
+      const bottomValue = `${locale === 'fa' ? 'هفته' : 'Week'} ${weekNumber}`;
 
       bottomValues.push(
         <text
@@ -221,9 +230,9 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date
+      const bottomValue = `${getLocalDayOfWeek(date, locale, (rtl ? "narrow" : "short"))} (${date
         .getDate()
-        .toString()}`;
+        .toString()})`;
 
       bottomValues.push(
         <text
@@ -251,8 +260,8 @@ export const Calendar: React.FC<CalendarProps> = ({
             xText={
               columnWidth * (i + 1) -
               getDaysInMonth(date.getMonth(), date.getFullYear()) *
-                columnWidth *
-                0.5
+              columnWidth *
+              0.5
             }
             yText={topDefaultHeight * 0.9}
           />